Implementing multiple file uploads based on javascript html5_javascript skills

The example in this article shares with you how to implement multiple file uploads using javascript html5. The specific content is as follows

HTML structure:

<div class="container">
  <label>请选择一个图像文件：</label>
  <input type="file" id="file_input" multiple/>
</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:

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

Is it possible to upload multiple pictures just like this?

However, it doesn’t. This just converts the image into base64 encoding and then displays it on the front end. When refreshing, 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.

Then 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

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 : '',
          type : 'post',
          data : fd,
          success : function(data){
            console.log(data)
         　} 
        })
}  

FormData is also a new interface of H5, used to simulate the submission of form controls. The biggest advantage is that it can submit binary files

Then after we get the desired data back in the success callback, we can insert the image 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.