How to upload multiple pictures in H5

This article will explain in detail how to upload multiple pictures on H5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

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 it.

The picture was also written before uploading, but it was uploaded by a single sheet. Recently, there is a business requirement that requires multiple uploads, so I rewrote it.

HTML structure:

Please select an image file:

By the way, the main logic of this upload:

Use the input tag and select type=file, and remember to bring multiple, otherwise you will have to select the picture

Bind the change time of input

The key point is how to deal with this change event, use H5's new FileReader interface to read the file and encode it into base64, and then interact with the back-end students.

JS Code:

_ window.onload = function () {var input = document.getElementById ("file_input"); var result,p; if (typeof FileReader==='undefined') {result [XSS _ clean] = "Sorry, your browser does not support FileReader"; input.setAttribute ('disabled','disabled');} else {input.addEventListener (' change',readFile,false) }

/ / handler function readFile () {for (var iTuno