JS实现多文件批量上传与进度条显示

背景与目标

项目中需要实现文件批量上传功能，并要求展示上传进度。起初认为该功能并不复杂，但在实际开发过程中遇到了诸多问题，令人困扰。

通过参考现有代码并进行测试，发现网上许多方案存在缺陷，无法满足实际需求。经过查阅资料和总结，最终完成了该功能的开发。

欢迎提出疑问以便交流探讨，如有不当之处也请指正，我将虚心学习。作为新晋博客作者，您的支持是我持续创作的动力，感谢大家。

技术栈与前置条件

技术栈条件：采用Struts2、Java、Ajax以及FormData进行实现；

前端实现逻辑

1. 实现逻辑需清晰，多文件上传需在input标签中添加multiple属性。

2. 点击上传后触发的主方法。

3. 循环遍历所选文件，将其逐一添加到FormData对象中。

4. 将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实现批量上传文件并显示进度，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！