PHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできます-PHPチュートリアル-php.cn

PHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできます

藏色散人

リリース： 2023-04-09 11:16:01

転載

2965 人が閲覧しました

最近問題を解決しているのですが、写真をアップロードする際、選択に成功するとプレビューできるようになりました。

PHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできます

#要件: アップロードアイコンをクリックすると、ファイル名が前面の入力ボックスに表示され、次の方法でプレビューできます。その後ろにある表示ボタンをクリックします。この画像を選択しましたが、ページを更新できないことが必要です

1。最初は、ajax を使用してアップロードするつもりでしたが、後で問題が発生することがわかりました複数の写真が同時にアップロードされる場合、ajax で写真をアップロードする原理は、「写真が撮影されたとき」を選択すると、js を使用してタイプファイルの入力ボックスの外側にフォームをラップし、自動的に php ファイルに送信されます。 ajaxSubmit を介してアップロードし、php ファイルを介してアップロードし、最後にサーバーにアップロードされた画像パスを返し、「表示するとこの画像を取得できます」をクリックします。実際、この時点で画像はサーバーにアップロードされています。ただし、この要件は複数の写真に対するものであり、大きな問題が発生します。

2. その後、インターネットで、ローカルで選択した画像をリアルタイムでプレビューするために js が使用されていることを知りました。これと ajax アップロードの違いは、画像ファイルを選択した後、画像ファイルがファイルにアップロードされないことです。サーバーから取得されますが、ローカルマシンから直接取得されます。画像のパスプレビュー。以下は、このアプローチを使用して最終結果を達成する方法の例です。

方法:

<input type="file" name="photo_file[]" class="ata_pt" οnchange="previewImage(this)"/>
<input type="hidden" class="imageurl" />

ログイン後にコピー

まず、ファイルをアップロードするための入力ボックスが必要です

次に、ローカル画像パスを取得するために下に非表示のフォーム入力ボックスを追加します

//图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
            if (file.files && file.files[0])
            {
                var reader = new FileReader();
                reader.onload = function(evt){
                    $(file).next().val(evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter=&#39;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="&#39;;
                file.select();
                var src = document.selection.createRange().text;
                //p.innerHTML = &#39;<img  id=imghead alt="PHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできます" >&#39;;
                //var img = document.getElementById(&#39;imghead&#39;);
                //img.filters.item(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = src;
                $(this).next().val(src);
                //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                //status =(&#39;rect:&#39;+rect.top+&#39;,&#39;+rect.left+&#39;,&#39;+rect.width+&#39;,&#39;+rect.height);
                //p.innerHTML = "<p id=phead style=&#39;width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"&#39;></p>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }

ログイン後にコピー

画像を選択すると、previewImage() メソッドが呼び出されることがわかります。このメソッドは、ローカル画像のアドレスを取得し、imageurl クラスを使用して入力ボックスに渡すために使用されます。

次にビューボタンを作成します。

<input type="hidden" class="imageurl" />

ログイン後にコピー

の直下にボタンを追加しました。このボタンをクリックすると$(this).prev().val()が取得されるのでそれを渡します。

<p><img  src=" " id="preview" alt="PHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできます" ></p>

ログイン後にコピー

テストした結果、Firefox、chrome、ie10以降であればこの方法で満足でき、基本的には十分です。

数日前から抱えていた問題がこんな形で解決するとは思いませんでした、効率は良くありません、経験を積んでいきましょう！経験を積もう！経験を積もう！

以上がPHPで複数の写真をアップロードする場合、写真を選択した後に問題をプレビューできますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。