Home > Developer > Web Develop
Accept the project today to complete the file batch upload file and also to show the upload progress, at first I think this should not be very troublesome, when I was doing a lot of problems encountered, very headache ah.
But read someone else to write code, oneself also tested, found that there are a lot of online problems, not what they want. And then consult their own information, through their own summary, the final completion of this function.
If you have any questions can be put forward, exchange, study. There is nothing wrong place also pointed out, I also humbly learn. I have just written a blog, your praise is my motivation to write a blog, thank you.
Condition: I adopt Struts2,java, Ajax,formdata realizes;
1. Realize the logic must be clear, multi-file upload to add the multiple attribute to the input tag
2. Click on upload to trigger the method
3. Loop to add the selected file to the Formdata object
.
4. Encapsulate the content of the Ajax sent into a method, loop Ajax, and commit to multiple files at once. Note here that the Ajax loop should be recursive, and if you take a for loop, you will get unexpected results, and Ajax is an asynchronous request.
5. Add XHR in Ajax to set the upload listener event.
6.java background receive, when the action is received in the background, you will see that the GetFiles () method has been uploaded to the file under the Tomcat service address. , other parameters can be obtained, here I will not show.
7. When Ajax successfully returns data, it indicates that the file has been uploaded to the server, removing the previous file and executing the subsequent file to send Ajax
8. Listen for the event and listen to the upload speed of each file.
Below I will share the code that I do the test, if everyone has what do not understand the place can be commented out, we exchange learning progress together.
HTML section:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><Linkrel= "stylesheet"type= "Text/css"href= "./css/newfile.css"><Scripttype= "Text/javascript"src= "./js/jquery-1.9.1.min.js"></Script><Scripttype= "Text/javascript"src= "./js/filemuti.js"></Script></Head><Body><DivID= "Test"><inputtype= "File"ID= "Filemutiply"name= "Files"multiple= "multiple" ></Div></Body></HTML>
JS file section: This is the key,
1 /**2 * 3 */4 varI=0;5 varJ=0;6$(function(){7 8$ ("#fileMutiply"). Change (functionEventstart () {9 varSS = This. files;//gets the currently selected file ObjectTen for(varm=0;m<ss.length;m++) {//Loop to add a progress bar One AEfilename =Ss[m].name; - if(ss[m].size> 1024 * 1024){ -Sfilesize = (Math.Round (ss[m].size/(1024x768)). ToString () + ' MB '; the } - Else{ -Sfilesize = (Math.Round (ss[m].size/1024)). ToString () + ' KB '; - } + - +$ ("#test"). Append ( A"<li id=" +m+ "File><div class= ' progress ' ><div id=" +m+ "Barj class= ' ProgressBar ' ></div></ Div><span class= ' filename ' > ' +efilename+ ' </span><span id= "+m+" pps class= ' Progressnum ' > "+ ( sfilesize) + "</span></li>"); at - } - Sendajax (); - functionSendajax () { - if(j>=ss.length)//recursively send AJAX requests in a recursive fashion - { in$ ("#fileMutiply"). Val (""); -J=0; to return; + } - varFormData =NewFormData (); theFormdata.append (' Files ', ss[j]);//Add the file object to the Formdata object * $.ajax ({ $URL: ' Fileupload.action ',Panax NotoginsengType: ' POST ', -Cachefalse, thedata:{},//What parameters do you need to configure yourself +Data:formdata,//file is passed in formdata form AProcessData:false, the //must be false to automatically add the correct content-type +ContentType:false , - /*beforesend:beforesend,//Sending requests $ complete:complete,//Request completed $ */Xhr:function(){//Monitor for upload display progress - varXHR =$.ajaxsettings.xhr (); - if(OnProgress &&xhr.upload) { theXhr.upload.addEventListener ("Progress", OnProgress,false); - returnxhr;Wuyi } the } , -Successfunction(data) { Wu - About$ (". FileList"). Find ("#" +j+ "file"). Remove ();//Remove a progress bar style $j + +;//Recursive conditions - Sendajax (); - - // } A + }, theErrorfunction(XHR) { -Alert ("Upload error"); $ } the }); the the the } - in }) the the About functionOnProgress (evt) { the the varloaded = evt.loaded;//already uploaded size condition the vartot = evt.total;//Total Attachment Size + varper = Math.floor (100*loaded/tot); Percentage that has been uploaded -$ (". FileList"). Find ("#" +j+ "PPS"). Text (per + "%")); the$ (". FileList"). Find ("#" +j+ "Barj"). Width (per+ "%");Bayi }; the the -})
If you have any questions can be put forward, exchange, study. There is nothing wrong place also pointed out, I also humbly learn.
I have just written a blog, your praise is my motivation to write a blog, thank you.
Without plug-ins, write your own JS, to achieve batch upload files and progress display
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
