HTML5 implements multiple image upload function_html5 tutorial skills

I have written about image uploading before, but it was a single upload. Recently, there was a business requirement that required multiple uploads, so I rewrote it

HTML structure:

XML/HTML CodeCopy content to clipboard

1. <div class="container" >
2.  <label>Please select an image file: label>
3.  <input type="file" id="file_input" multiple/>
4. div>

By the way, let’s talk about the main logic of this upload:

·Use the input tag and select type=file. Remember to bring multiple, otherwise you can only select a single image

·Bind the change time of the input,

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

JS code:

JavaScript CodeCopy content to clipboard

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    ';
19. div = document.createElement('div');
20. div.innerHTML = result;
21. document.getElementById('body').appendChild(div); //Insert dom tree
    　　　　　}
22.                                                            
                                                              
23. }
Is this how to upload multiple pictures? 0.0

However, it doesn’t. This just converts the image into base64 encoding and then displays it on the front end. When I refresh it, there is nothing

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

The realistic approach is that we send the files in the file queue to the backend in the processing function. The backend students return the MD5 encrypted file and path corresponding to the file to the front end, and the front end takes this path and renders it to the page. superior.

After that, the MD5 file is sent back to the backend, because the frontend usually deletes the pictures after uploading. The purpose of the return is to tell the backend to confirm that those pictures are what we want, and the backend stores them in the database.

Tell me how to interact with jquery

JavaScript Code

Copy content to clipboard

1. function readFile(){   
2.             var fd = new FormData();   
3.             for(var i=0;i<this.files.length;i ){   
4.                 var reader = new FileReader();   
5.                 reader.readAsDataURL(this.files[i]);   
6.                 fd.append(i,this.files[i]);
   　　　　　　　　　 }   
7.                 $.ajax({   
8.                     url : '',   
9.                     type : 'post',   
10.                     data : fd,   
11.                     success : function(data){   
12.                         console.log(data)   
13.                   　}    
14.                 })   
15. }      

FormData也是H5的新接口，用来模拟表单控件的提交，最大的好处呢就是可以提交二进制文件

然后success的回调里面我们拿回了想要的数据后呢，就可以将图片插进去页面啦，类似之前的做法~

上个效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/weapon-x/p/5237064.html