JS实现批量上传文件并显示进度功能


Posted in Javascript onJune 27, 2017

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊。

不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的。然后自己查阅各种资料,经过自己总结,最终完成了这个功能。

如果大家有什么问题可以提出来,一起交流,学习。有什么不对的地方也指出来,我也虚心学习。自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家。

条件:我采用struts2,java ,ajax,FormData实现;

JS实现批量上传文件并显示进度功能

1.实现的逻辑一定要清楚,多文件上传要在input标签中添加 multiple属性

JS实现批量上传文件并显示进度功能

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

JS实现批量上传文件并显示进度功能

3.循环将选择的文件添加到FormData对象中

JS实现批量上传文件并显示进度功能

4.将发送ajax的内容封装到一个方法中,循环ajax,对多个文件一次一次提交。这里要注意了,ajax循环时要采用递归的方式,如果采用for循环,就会得到你意想不到的结果,ajax是异步请求。

5.在ajax中添加xhr,设置上传监听事件。

JS实现批量上传文件并显示进度功能

6.java后台接收,当后台接收到action时,你会看到getFiles()方法中已经得到了上传文件在tomcat服务下的地址。,其它参数均能得到,这里我就不一一展示了。

JS实现批量上传文件并显示进度功能

7.当ajax成功返回数据时,说明该文件已经传到服务器上了,此时移除上一个文件并执行后面的文件发送ajax

JS实现批量上传文件并显示进度功能

8.监听事件的写法,监听每一个文件上传速度情况。

JS实现批量上传文件并显示进度功能

下面我就分享出我做测试用的代码,如果大家有什么不懂的地方可以评论出来,大家一起交流学习进步。

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

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
jQuery 选择器详解
Jan 19 Javascript
JavaScript事件委托实例分析
May 26 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
angular过滤器实现排序功能
Jun 27 #Javascript
详解AngularJS ng-class样式切换
Jun 27 #Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
JavaScript事件方法(实例讲解)
Jun 27 #Javascript
简单谈谈原生js的math对象
Jun 27 #Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 #Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 #Javascript
You might like
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python分割和拼接字符串
2013/11/01 Python
python基本语法练习实例
2017/09/19 Python
Python扩展内置类型详解
2018/03/26 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python中return self的用法详解
2018/07/27 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python编写计算器功能
2019/10/25 Python
基于FME使用Python过程图解
2020/05/13 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
外贸业务员求职信范文
2013/12/12 职场文书
离婚协议书范文2014
2014/10/16 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
毕业论文致谢信
2015/05/14 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技