標籤：rem 實現 非同步請求 .text doc res body end 選擇
今天接受項目中要完成檔案批量上傳檔案而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。
不過看了別人寫的代碼，自己也測試過，發現網上好多都存在一些問題，並不是自己想要的。然後自己查閱各種資料，經過自己總結，最終完成了這個功能。
如果大家有什麼問題可以提出來，一起交流，學習。有什麼不對的地方也指出來，我也虛心學習。自己也是剛寫部落格，您們的贊是我寫部落格的動力，謝謝大家。
條件：我採用struts2,java ,ajax，FormData實現;
1.實現的邏輯一定要清楚，多檔案上傳要在input標籤中添加 multiple屬性
2.點擊上傳後觸發的方法
3.迴圈將選擇的檔案添加到FormData對象中
.
4.將發送ajax的內容封裝到一個方法中，迴圈ajax，對多個檔案一次一次提交。這裡要注意了，ajax迴圈時要採用遞迴的方式，如果採用for迴圈，就會得到你意想不到的結果，ajax是非同步請求。
5.在ajax中添加xhr，設定上傳監聽事件。
6.java後台接收，當後台接收到action時，你會看到getFiles()方法中已經得到了上傳檔案在tomcat服務下的地址。，其它參數均能得到，這裡我就不一一展示了。
7.當ajax成功返回資料時，說明該檔案已經傳到伺服器上了，此時移除上一個檔案並執行後面的檔案發送ajax
8.監聽事件的寫法，監聽每一個檔案上傳速度情況。
下面我就分享出我做測試用的代碼，如果大家有什麼不懂的地方可以評論出來，大家一起交流學習進步。
html部分：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="./css/NewFile.css"><script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="./js/fileMuti.js"></script></head><body><div id="test"><input type="file" id="fileMutiply" name="files" multiple="multiple" ></div></body></html>
js檔案部分：這是關鍵，
1 /** 2 * 3 */ 4 var i=0; 5 var j=0; 6 $(function(){ 7 8 $("#fileMutiply").change(function eventStart(){ 9 var ss =this.files; //擷取當前選擇的檔案對象10 for(var m=0;m<ss.length;m++){ //迴圈添加進度條11 12 efileName = ss[m].name ;13 if (ss[m].size> 1024 * 1024){14 sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + ‘MB‘;15 }16 else{17 sfileSize = (Math.round(ss[m].size/1024)).toString() + ‘KB‘;18 }19 20 21 $("#test").append(22 "<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>");23 24 }25 sendAjax();26 function sendAjax() { 27 if(j>=ss.length) //採用遞迴的方式迴圈發送ajax請求28 { 29 $("#fileMutiply").val("");30 j=0;31 return; 32 }33 var formData = new FormData();34 formData.append(‘files‘, ss[j]); //將該file對象添加到formData對象中35 $.ajax({36 url:‘fileUpLoad.action‘,37 type:‘POST‘,38 cache: false,39 data:{},//需要什麼參數，自己配置40 data: formData,//檔案以formData形式傳入41 processData : false, 42 //必須false才會自動加上正確的Content-Type 43 contentType : false , 44 /* beforeSend:beforeSend,//發送請求45 complete:complete,//請求完成46 */ xhr: function(){ //監聽用於上傳顯示進度47 var xhr = $.ajaxSettings.xhr();48 if(onprogress && xhr.upload) {49 xhr.upload.addEventListener("progress" , onprogress, false);50 return xhr;51 }52 } ,53 success:function(data){54 55 56 $(".filelist").find("#"+j+"file").remove();//移除進度條樣式57 j++; //遞迴條件58 sendAjax();59 60 // }61 62 },63 error:function(xhr){64 alert("上傳出錯");65 } 66 });67 68 69 } 70 71 })72 73 74 function onprogress(evt){75 76 var loaded = evt.loaded; //已經上傳大小情況 77 var tot = evt.total; //附件總大小 78 var per = Math.floor(100*loaded/tot); //已經上傳的百分比 79 $(".filelist").find("#"+j+"pps").text(per +"%");80 $(".filelist").find("#"+j+"barj").width(per+"%");81 };82 83 84 })
如果大家有什麼問題可以提出來，一起交流，學習。有什麼不對的地方也指出來，我也虛心學習。
自己也是剛寫部落格，您們的贊是我寫部落格的動力，謝謝大家。
不帶外掛程式 ，自己寫js，實現批量上傳檔案及進度顯示
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
