_javascript technique of multi-file uploading based on JavaScript HTML5

This article is an example to share the JavaScript HTML5 implementation of multiple file upload method, the specific contents are as follows

HTML structure:

<div class= "Container" >
  <label> Please select an image file:</label>
  <input type= "file" id= "File_input" Multiple/>
</div>

By the way, the main logic of this upload:

• Use input label and choose Type=file, remember to bring multiple, or you can only select pictures
• Bind the change time of input,
• The key is how to deal with this change event, using H5 new FileReader interface to read the file and make the Base64 code, then the thing is to interact with the back-end students play the

JS Code:

Window.onload = function () {var input = document.getElementById ("File_input");
 
    var Result,div;
      if (typeof filereader=== ' undefined ') {result.innerhtml = "Sorry, your browser does not support 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[' Valu E '].match (/.jpg|. Gif|. Png|. bmp/i)) {//Judge upload file Format return alert ("Upload picture is not formatted correctly, please select Again") <br>} var reader = new FileReader ()
        ;
        Reader.readasdataurl (This.files[i]); Reader.onload = function (e) {result = ' <div id= ' result ' ></div&"
          gt; ';
          div = document.createelement (' div ');
          div.innerhtml = result; 　　document.getElementById (' body '). appendchild (Div);
 Insert Dom tree <br>}}}

Upload more than one picture is this the realization of it?

However, there is no, so just convert the picture into Base64 encoding and then front end display, a refresh nothing

When you insert a picture, open the developer tool and look at the HTML structure.

The reality is, we in the processing function in the file queue to send the file to the back end, the back end of the students to return the file corresponding to the MD5 encrypted file and path to the front end, the front-end to take this path rendering to the page.

Then the MD5 file back to the back end, because the end of the upload after the general have to delete the image of the operation, the return purpose is to tell the backend to confirm those pictures are we want, the backend into the database.

Let's talk about 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 for H5, which simulates the submission of form controls, with the greatest benefit of being able to submit binary files

Then success's callback inside we take back the data we want, we can insert the image into the page, similar to the previous practice ~

Last Effect chart:

The above is the entire content of this article, I hope to help you learn.