Detailed explanation of examples of H5 completing multiple image uploads

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

Picture Uploading I have written it before, but it was a single upload. Recently, there was a business requirement that required multiple uploads, so I rewrote the

HTML structure:

XML/HTMLCodeCopy the content to the clipboard

 请选择一个图像文件：  

By the way, the main logic of this upload:

·Useinput tagand select type=file, remember to bring multiple, otherwise you can only select a single picture

·Bind the change time of the input,

·The key point is how to handle this changeevent. Use H5’s new FileReaderinterfaceto read the fileand encode it into base64. The next thing is Playing interactively with back-end classmates

JS code:

##JavaScriptCodeCopy Content to clipboard

window.onload = function(){ var input = document.getElementById("file_input"); var result,p; if(typeof FileReader==='undefined'){ result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); }
　　　　　//handler function readFile(){ for(var i=0;i　　　　　　　　　　} var reader = new FileReader(); reader.readAsDataURL(this.files[i]); reader.onload = function(e){ result = '
'; p = document.createElement('p'); p.innerHTML = result; document.getElementById('body').appendChild(p); 　　//插入dom树 
　　　　　　　　　　} } } }

function In, the file in the filequeueis sent to the backend. The backend student returns theMD5encrypted file and path corresponding to the file to the frontend, and the frontend takes this path. Rendered to the page.

deletingpictures. The purpose of the return is to tell the backend to confirm that those pictures are what we want. , the backend is stored in the database.

jquery

Copy content to the clipboard

function readFile(){ var fd = new FormData(); for(var i=0;i　　　　　　　　　 } $.ajax({ url : '', type : 'post', data : fd, success : function(data){ console.log(data) 　} }) }

. The biggest advantage is that you can submit binary filesand then call back the success After we get back the data we want, we can insert the picture 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.

【Related Recommendations】

1.

2.

3.

4.

5.

The above is the detailed content of Detailed explanation of examples of H5 completing multiple image uploads. For more information, please follow other related articles on the PHP Chinese website!