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 判断代码全收集
Apr 28 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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中使用PDF文档功能
2006/10/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Javascript中replace()小结
2015/09/30 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python读大数据txt
2016/03/28 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python实现单链表的方法示例
2019/09/03 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python 解析xml文件的示例
2020/09/29 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
linux面试相关问题
2013/04/28 面试题
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
详解python的异常捕获
2022/03/03 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server