今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進度,一開始覺得這個應該不是很麻煩,當我在做的時候遇到了很多問題,很頭疼啊。
不過看了別人寫的代碼,自己也測試過,發現網上好多都存在一些問題,并不是自己想要的。然后自己查閱各種資料,經過自己總結,最終完成了這個功能。
如果大家有什么問題可以提出來,一起交流,學習。有什么不對的地方也指出來,我也虛心學習。自己也是剛寫博客,您們的贊是我寫博客的動力,謝謝大家。
條件:我采用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" rel="external nofollow" > <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文件部分:這是關鍵,
/** * */ var i=0; var j=0; $(function(){ $("#fileMutiply").change(function eventStart(){ var ss =this.files; //獲取當前選擇的文件對象 for(var m=0;m<ss.length;m++){ //循環添加進度條 efileName = ss[m].name ; if (ss[m].size> 1024 * 1024){ sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB'; } else{ sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB'; } $("#test").append( "<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>"); } sendAjax(); function sendAjax() { if(j>=ss.length) //采用遞歸的方式循環發送ajax請求 { $("#fileMutiply").val(""); j=0; return; } var formData = new FormData(); formData.append('files', ss[j]); //將該file對象添加到formData對象中 $.ajax({ url:'fileUpLoad.action', type:'POST', cache: false, data:{},//需要什么參數,自己配置 data: formData,//文件以formData形式傳入 processData : false, //必須false才會自動加上正確的Content-Type contentType : false , /* beforeSend:beforeSend,//發送請求 complete:complete,//請求完成 */ xhr: function(){ //監聽用于上傳顯示進度 var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } , success:function(data){ $(".filelist").find("#"+j+"file").remove();//移除進度條樣式 j++; //遞歸條件 sendAjax(); // } }, error:function(xhr){ alert("上傳出錯"); } }); } }) function onprogress(evt){ var loaded = evt.loaded; //已經上傳大小情況 var tot = evt.total; //附件總大小 var per = Math.floor(100*loaded/tot); //已經上傳的百分比 $(".filelist").find("#"+j+"pps").text(per +"%"); $(".filelist").find("#"+j+"barj").width(per+"%"); }; })
以上所述是小編給大家介紹的JS實現批量上傳文件并顯示進度,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。