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 相关文章推荐
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
jQuery功能函数详解
Feb 01 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python实现学生管理系统
2018/01/11 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python利用tkinter实现屏保
2019/07/30 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
班长竞选演讲稿
2014/04/24 职场文书
2015年大学生工作总结
2015/04/21 职场文书
盗窃案辩护词
2015/05/21 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
nginx中proxy_pass各种用法详解
2021/11/07 Servers