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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
JS作用域深度解析
Dec 29 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php中explode函数用法分析
2014/11/15 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
详解JS函数重载
2014/12/04 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
学习Node.js模块机制
2016/10/17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
代理协议书
2014/04/22 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers