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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
详解jQuery-each()方法
Mar 13 jQuery
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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
javascript折半查找详解
2015/01/26 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python新手实现2048小游戏
2015/03/31 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
四议两公开实施方案
2014/03/28 职场文书
法制报告会主持词
2014/04/02 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
大学生简短的自我评价
2014/09/12 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
重温入党誓词主持词
2015/06/29 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
python中 Flask Web 表单的使用方法
2022/05/20 Python