今天接受專案中要完成檔批量上傳檔而且還要顯示上傳進度， 一開始覺得這個應該不是很麻煩， 當我在做的時候遇到了很多問題， 很頭疼啊。
不過看了別人寫的代碼， 自己也測試過， 發現網上好多都存在一些問題， 並不是自己想要的。 然後自己查閱各種資料， 經過自己總結， 最終完成了這個功能。
條件：我採用struts2,java ,ajax， FormData實現;
1.實現的邏輯一定要清楚， 多檔上傳要在input標籤中添加 multiple屬性
2.點擊上傳後觸發的方法
3.迴圈將選擇的檔添加到FormData物件中
.
4.將發送ajax的內容封裝到一個方法中， 迴圈ajax， 對多個檔一次一次提交。 這裡要注意了，
5.在ajax中添加xhr， 設置上傳監聽事件。
6.java後臺接收， 當後臺接收到action時， 你會看到getFiles方法中已經得到了上傳檔在tomcat服務下的位址。 ， 其它參數均能得到， 這裡我就不一一展示了。
7.當ajax成功返回資料時， 說明該檔已經傳到伺服器上了， 此時移除上一個檔並執行後面的檔發送ajax
8.監聽事件的寫法， 監聽每一個檔上傳速度情況。
下面我就分享出我做測試用的代碼， 如果大家有什麼不懂的地方可以評論出來， 大家一起交流學習進步。
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 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 ""+efileName+""+(sfileSize)+""); 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 })如果大家有什麼問題可以提出來， 一起交流， 學習。 有什麼不對的地方也指出來， 我也虛心學習。
自己也是剛寫博客， 您們的贊是我寫博客的動力， 謝謝大家。