Detailed explanation of examples of H5 completing multiple image uploads-H5 Tutorial-php.cn

Detailed explanation of examples of H5 completing multiple image uploads

Y2J

Release： 2017-05-24 11:42:01

Original

4000 people have browsed it

This article mainly introduces the function of uploading multiple pictures based on HTML5, and the function of uploading multiple pictures on the basis of uploading a single picture. Interested friends can refer to

Picture Uploading I have written it before, but it was a single upload. Recently, there was a business requirement that required multiple uploads, so I rewrote the

HTML structure:

XML/HTML CodeCopy the content to the clipboard

<p class="container">  
    <label>请选择一个图像文件：</label>  
    <input type="file" id="file_input" multiple/>  
</p>

Copy after login

By the way, the main logic of this upload:

·Use input tag and select type=file, remember to bring multiple, otherwise you can only select a single picture

·Bind the change time of the input,

·The key point is how to handle this change event. Use H5’s new FileReader interface to read the file and encode it into base64. The next thing is Playing interactively with back-end classmates

JS code:

##JavaScript CodeCopy Content to clipboard

window.onload = function(){   
        var input = document.getElementById("file_input");   
        var result,p;   
    
        if(typeof FileReader===&#39;undefined&#39;){   
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
            input.setAttribute(&#39;disabled&#39;,&#39;disabled&#39;);   
        }else{   
            input.addEventListener(&#39;change&#39;,readFile,false);   
        }<br>　　　　　//handler   
        function readFile(){   
            for(var i=0;i<this.files.length;i++){   
                if (!input[&#39;value&#39;].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
                    return alert("上传的图片格式不正确，请重新选择")<br>　　　　　　　　　　}   
                var reader = new FileReader();   
                reader.readAsDataURL(this.files[i]);   
                reader.onload = function(e){   
                    result = &#39;<p id="result"><img src="&#39;+this.result+&#39;" alt=""/></p>&#39;;   
                    p = document.createElement(&#39;p&#39;);   
                    p.innerHTML = result;   
                    document.getElementById(&#39;body&#39;).appendChild(p);  　　//插入dom树                      <br>　　　　　　　　　　}   
            }   
        }   
    }

Copy after login

Is this how to upload multiple pictures? 0.0

However, it is not. This just converts the pictures into base64 encoding and then displays them on the front end. Once refreshed Nothing

After inserting the image, open the developer tools and see that the html structure is like this

The realistic approach is that we are dealing with the

function In , the file in the file queue is sent to the backend. The backend student returns the MD5encrypted file and path corresponding to the file to the frontend, and the frontend takes this path. Rendered to the page.

Then transfer the MD5 file back to the backend, because after uploading, the frontend usually has the operation of

deleting pictures. The purpose of the return is to tell the backend to confirm that those pictures are what we want. , the backend is stored in the database.

Tell me how to interact with

jquery

##JavaScript Code

Copy content to the clipboard

function readFile(){   
            var fd = new FormData();   
            for(var i=0;i<this.files.length;i++){   
                var reader = new FileReader();   
                reader.readAsDataURL(this.files[i]);   
                fd.append(i,this.files[i]);<br>　　　　　　　　　 }   
                $.ajax({   
                    url : &#39;&#39;,   
                    type : &#39;post&#39;,   
                    data : fd,   
                    success : function(data){   
                        console.log(data)   
                  　}    
                })   
}

Copy after login

FormData is also a new interface of H5, used to simulate the submission of form controls

. The biggest advantage is that you can submit binary files and then call back the success After we get back the data we want, we can insert the picture into the page, similar to the previous method~

Last rendering:

The above is the entire content of this article, I hope it will be helpful to everyone's study.

【Related Recommendations】

Html5 free video tutorial

Example tutorial on the combined use of H5 and CSS3

Detailed explanation of the event attributes of H5

Detailed explanation of 28 very important new features, new techniques and new technologies of H5

Code demonstration of making a timer in H5

The above is the detailed content of Detailed explanation of examples of H5 completing multiple image uploads. For more information, please follow other related articles on the PHP Chinese website!