When uploading multiple pictures in php, the problem can be previewed after selecting the picture

I have been solving a problem these days. When uploading a picture, you can preview it after selecting it successfully.

#Requirement: When you click the upload icon, the file name will be displayed in the front input box, and then you can preview it by clicking the view button behind it. I selected this picture, but it is required that the page cannot be refreshed

1. At first, I planned to use ajax to upload it, but later I found that problems would occur when multiple pictures are uploaded at the same time. The principle of ajax uploading pictures is that when you select When a picture is taken, js will be used to wrap a form outside the input box of type file and then automatically submitted to the php file through ajaxSubmit, and then uploaded through the php file, and finally return an image path uploaded to the server, click You can get this picture when viewing it. In fact, the picture has been uploaded to the server at this time. But this requirement is for multiple pictures, and this will cause big problems.

2. Later, I found on the Internet that js is used to preview locally selected images in real time. The difference between this and ajax upload is that after selecting the image file, it will not be uploaded to the server, but directly retrieved from the local machine. Path preview of the image. Below is an example of how this approach was used to achieve the final result.

Method:

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

First you need an input box for uploading files

Then add a hidden form input box below to get its local image path

//图片上传预览    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='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                //p.innerHTML = &#39;<img  src="/static/imghwm/default1.png"  data-src=" "  class="lazy"  id=imghead alt="When uploading multiple pictures in php, the problem can be previewed after selecting the picture" >&#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;
        }

You can see that the previewImage() method is called when selecting an image. This method is used to obtain the address of the local image and pass it into the input box with class imageurl.

Then create a view button. I added a button directly under

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

. When this button is clicked, $(this).prev().val() is obtained. Then pass it to the img in p where you want to display the picture, so that the picture will be displayed.

<p><img  src="/static/imghwm/default1.png"  data-src=" "  class="lazy"   id="preview" alt="When uploading multiple pictures in php, the problem can be previewed after selecting the picture" ></p>

After testing, this method can satisfy firefox, chrome, ie10 and above, and it is basically enough.

I didn’t expect that the problem that I had been pressing for a few days was solved like this. The efficiency is not high. Let’s accumulate experience! Gain experience! Gain experience!

The above is the detailed content of When uploading multiple pictures in php, the problem can be previewed after selecting the picture. For more information, please follow other related articles on the PHP Chinese website!