Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how to use HTML5 to achieve multiple image upload function, I believe most people still do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

HTML structure:

Please select an image file:

By the way, the main logic of this upload:

·Use the input label and select type=file, remember to bring multiple, otherwise you can only choose pictures

·Binding the change time of input,

·The key point is how to handle this change event. Use the new FileReader interface of H5 to read the file and type it into base64 code. After that, the 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[xss_clean] = "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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.