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的数组和常用函数详解
May 09 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue的mixins属性详解
Mar 14 Javascript
vue自动化表单实例分析
May 06 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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 cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
个人求职信范文分享
2013/12/13 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
详解MySQL集群搭建
2021/05/26 MySQL
python随机打印成绩排名表
2021/06/23 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js