JS實現(xiàn)批量上傳文件并顯示進(jìn)度功能

更新時間：2017年06月27日 08:42:42 作者：還是盼盼好

這篇文章主要介紹了JS實現(xiàn)批量上傳文件并顯示進(jìn)度功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進(jìn)度，一開始覺得這個應(yīng)該不是很麻煩，當(dāng)我在做的時候遇到了很多問題，很頭疼啊。

不過看了別人寫的代碼，自己也測試過，發(fā)現(xiàn)網(wǎng)上好多都存在一些問題，并不是自己想要的。然后自己查閱各種資料，經(jīng)過自己總結(jié)，最終完成了這個功能。

如果大家有什么問題可以提出來，一起交流，學(xué)習(xí)。有什么不對的地方也指出來，我也虛心學(xué)習(xí)。自己也是剛寫博客，您們的贊是我寫博客的動力，謝謝大家。

條件：我采用struts2,java ,ajax，F(xiàn)ormData實現(xiàn);

1.實現(xiàn)的邏輯一定要清楚，多文件上傳要在input標(biāo)簽中添加 multiple屬性

2.點擊上傳后觸發(fā)的方法

3.循環(huán)將選擇的文件添加到FormData對象中

4.將發(fā)送ajax的內(nèi)容封裝到一個方法中，循環(huán)ajax，對多個文件一次一次提交。這里要注意了，ajax循環(huán)時要采用遞歸的方式，如果采用for循環(huán)，就會得到你意想不到的結(jié)果，ajax是異步請求。

5.在ajax中添加xhr，設(shè)置上傳監(jiān)聽事件。

6.java后臺接收，當(dāng)后臺接收到action時，你會看到getFiles()方法中已經(jīng)得到了上傳文件在tomcat服務(wù)下的地址。，其它參數(shù)均能得到，這里我就不一一展示了。

7.當(dāng)ajax成功返回數(shù)據(jù)時，說明該文件已經(jīng)傳到服務(wù)器上了，此時移除上一個文件并執(zhí)行后面的文件發(fā)送ajax

8.監(jiān)聽事件的寫法，監(jiān)聽每一個文件上傳速度情況。

下面我就分享出我做測試用的代碼，如果大家有什么不懂的地方可以評論出來，大家一起交流學(xué)習(xí)進(jìn)步。

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文件部分：這是關(guān)鍵，

/**
 * 
 */
var i=0;
var j=0;
$(function(){
  $("#fileMutiply").change(function eventStart(){
    var ss =this.files; //獲取當(dāng)前選擇的文件對象
     for(var m=0;m<ss.length;m++){ //循環(huán)添加進(jìn)度條
         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)  //采用遞歸的方式循環(huán)發(fā)送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:{},//需要什么參數(shù)，自己配置
            data: formData,//文件以formData形式傳入
            processData : false, 
            //必須false才會自動加上正確的Content-Type 
            contentType : false , 
          /*  beforeSend:beforeSend,//發(fā)送請求
            complete:complete,//請求完成
    */      xhr: function(){   //監(jiān)聽用于上傳顯示進(jìn)度
              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ìn)度條樣式
               j++; //遞歸條件
              sendAjax();
          //   }
            },
            error:function(xhr){
             alert("上傳出錯");
            }               
          });
        } 
  })
    function onprogress(evt){
     var loaded = evt.loaded;   //已經(jīng)上傳大小情況 
     var tot = evt.total;   //附件總大小 
     var per = Math.floor(100*loaded/tot); //已經(jīng)上傳的百分比 
     $(".filelist").find("#"+j+"pps").text(per +"%");
     $(".filelist").find("#"+j+"barj").width(per+"%");
     };
})

以上所述是小編給大家介紹的JS實現(xiàn)批量上傳文件并顯示進(jìn)度，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: