不帶插件，本身寫js，實現批量上傳文件及進度顯示

時間 2019-12-10

標籤插件本身實現批量上傳文件進度顯示欄目 JavaScript 简体版

原文原文鏈接

今天接受項目中要完成文件批量上傳文件並且還要顯示上傳進度，一開始以爲這個應該不是很麻煩，當我在作的時候遇到了不少問題，很頭疼啊。javascript

不過看了別人寫的代碼，本身也測試過，發現網上好多都存在一些問題，並非本身想要的。而後本身查閱各類資料，通過本身總結，最終完成了這個功能。css

若是你們有什麼問題能夠提出來，一塊兒交流，學習。有什麼不對的地方也指出來，我也虛心學習。本身也是剛寫博客，您們的贊是我寫博客的動力，謝謝你們。html

條件：我採用struts2,java ,ajax，FormData實現;java

1.實現的邏輯必定要清楚，多文件上傳要在input標籤中添加 multiple屬性jquery

2.點擊上傳後觸發的方法ajax

3.循環將選擇的文件添加到FormData對象中tomcat

4.將發送ajax的內容封裝到一個方法中，循環ajax，對多個文件一次一次提交。這裏要注意了，ajax循環時要採用遞歸的方式，若是採用for循環，就會獲得你意想不到的結果，ajax是異步請求。服務器

5.在ajax中添加xhr，設置上傳監聽事件。app

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文件部分：這是關鍵，

/**
 * 
 */
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+"%");
         };
    
    
})