Home > Article > Web Front-end > 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:
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.