Multiple image uploads based on HTML5

Pictures uploaded before also have written demo, but a single upload, recently there is a business need to upload more than one, so the new rewrite

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 the input tag and select Type=file, remember to bring the multiple, or you can only choose the picture

• Bind the change time of input,

• The focus is on how to handle this change event, using H5 new FileReader interface to read the file and play the Base64 code, then the next thing is to play 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 = "Sorry, your browser does not support FileReader";        Input.setattribute (' disabled ', ' disabled ');        }else{input.addeventlistener (' Change ', readfile,false); }
handler function ReadFile () {for (Var i=0;i<this.files.length;i++) {if (!input[' value '].match (/.jpg|. Gif|. Png|. bmp/i) {//Determine upload file format return alert ("The uploaded picture is not formatted correctly, please re-select")
} var reader = new FileReader ();                Reader.readasdataurl (This.files[i]); Reader.onload = function (e) {result = ' <div id= "result" ></d                    Iv> ';                    div = document.createelement (' div ');                    div.innerhtml = result;  　　document.getElementById (' body '). appendchild (Div); Inserting the DOM tree
}            }        }    }

Uploading multiple images is that the way it's done? 0.0

However, it does not, so just convert the picture to Base64 encoding and then front-end display, a refresh nothing

After inserting the picture, open the developer tool to see the HTML structure is like this

The reality is, we in the processing function in the file queue file sent to the backend, back-end students back to the file corresponding to the MD5 encrypted files and paths to the front end, the front-end to take this path rendered to the page.

After the MD5 file back to the back end, because the front end of the upload after the general operation of the deletion of pictures, the purpose of the callback is to tell the backend to confirm that those images are what we want, back-end into the database.

How do you 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]);
}                $.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 commit binary files

Then success callback inside we get back the desired data, we can put the picture into the page, similar to the previous practice ~

Last:

My qualifications are still shallow, it is inevitable that there are flaws, you are welcome to correct the exchange

　　

　

Multiple image uploads based on HTML5