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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
js数组操作学习总结
Nov 04 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
JS合并两个数组的3种方法详解
Oct 24 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中文字符串截取方法实例总结
2014/09/30 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php判断当前操作系统类型
2015/10/28 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Django使用Celery异步任务队列的使用
2018/03/13 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python模块 _winreg操作注册表
2020/02/05 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
企业总经理职责
2014/02/02 职场文书
年终晚会主持词
2014/03/25 职场文书
文明礼仪标语
2014/06/13 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
学生退学证明
2015/06/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技