今天接受项目中要完成文件批量上传文件而且还要显示上传进度，一开始觉得这个应该不是很麻烦，当我在做的时候遇到了很多问题，很头疼啊。

不过看了别人写的代码，自己也测试过，发现网上好多都存在一些问题，并不是自己想要的。然后自己查阅各种资料，经过自己总结，最终完成了这个功能。

如果大家有什么问题可以提出来，一起交流，学习。有什么不对的地方也指出来，我也虚心学习。自己也是刚写博客，您们的赞是我写博客的动力，谢谢大家。

条件：我采用struts2,java ,ajax，FormData实现;

1.实现的逻辑一定要清楚，多文件上传要在input标签中添加 multiple属性

2.点击上传后触发的方法

3.循环将选择的文件添加到FormData对象中

.

4.将发送ajax的内容封装到一个方法中，循环ajax，对多个文件一次一次提交。这里要注意了，ajax循环时要采用递归的方式，如果采用for循环，就会得到你意想不到的结果，ajax是异步请求。

5.在ajax中添加xhr，设置上传监听事件。

6.java后台接收，当后台接收到action时，你会看到getFiles()方法中已经得到了上传文件在tomcat服务下的地址。，其它参数均能得到，这里我就不一一展示了。

7.当ajax成功返回数据时，说明该文件已经传到服务器上了，此时移除上一个文件并执行后面的文件发送ajax

8.监听事件的写法，监听每一个文件上传速度情况。

下面我就分享出我做测试用的代码，如果大家有什么不懂的地方可以评论出来，大家一起交流学习进步。

html部分：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="./css/NewFile.css">

<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，实现批量上传文件及进度显示的更多相关文章

  1. Python基于Python实现批量上传文件或目录到不同的Linux服务器

    基于Python实现批量上传文件或目录到不同的Linux服务器   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...

  2. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  3. Java Miniui实现批量上传文件demo 201906221520

    可能需要的jar包: 需要miniui(类似easyui). Test2019062201.jsp <%@ page language="java" contentType= ...

  4. 百度编辑器ueditor批量上传图片或者批量上传文件时，文件名称和内容不符合，错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  5. Linux命令之rz - 批量上传文件，简单易用（转载）

    用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情 况我们要上传文件到Linux系统,要么使用ftp(还得 ...

  6. 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder

    请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...

  7. js实现分段上传文件

    使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 1)获取文 ...

  8. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

  9. 使用 sendKeys(keysToSend) 批量上传文件

    未经允许,禁止转载!!! 在selenium里面处理文件上传的时候可以使用sendKeys(keysToSend) 上传文件 例如: element.sendKeys(“C:\\test\\uploa ...

随机推荐

  1. jenkins 用户名密码忘记

    进入c盘--用户 在本地用户的目录下找到.jenkins目录,里面有一个config.xml; 打开后,删除其中的 " <useSecurity>true</useSecu ...

  2. Hadoop技术在商业智能BI中的应用

    Hadoop是个很流行的分布式计算解决方案,是Apache的一个开源项目名称,核心部分包括HDFS及MapReduce.其中,HDFS是分布式文件系统,MapReduce是分布式计算引擎.时至今日,H ...

  3. 跨过Nginx上基于uWSGI部署Django项目的坑

    先说说他们的关系,Nginx和uWSGI都是Web服务器,Nginx负责静态内容,uWSGI负责Python这样的动态内容,二者配合共同提供Web服务以实现提高效率和负载均衡等目的.uWSGI实现了多 ...

  4. Tensorflow实践：CNN实现MNIST手写识别模型

    前言 本文假设大家对CNN.softmax原理已经比较熟悉,着重点在于使用Tensorflow对CNN的简单实践上.所以不会对算法进行详细介绍,主要针对代码中所使用的一些函数定义与用法进行解释,并给出 ...

  5. 010一对一 主键关联映射_双向(one-to-one)

    ²  两个对象之间是一对一的关系,如Person-IdCard(人—身份证号) ²  有两种策略可以实现一对一的关联映射 主键关联:即让两个对象具有相同的主键值,以表明它们之间的一一对应的关系:数据库 ...

  6. 开涛spring3(12.3) - 零配置 之 12.3 注解实现Bean定义

    12.3  注解实现Bean定义 12.3.1  概述 前边介绍的Bean定义全是基于XML方式定义配置元数据,且在[12.2注解实现Bean依赖注入]一节中介绍了通过注解来减少配置数量,但并没有完全 ...

  7. javaWeb学习总结（10）- EL函数库(2)

    一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...

  8. 4.docker学习之镜像

    镜像 我们知道,我们想在Windows操作系统上跑Linux,需要安装一个虚拟机程序,然后下载一个Linux镜像,在该虚拟机程序中创建一个虚拟机,并使用该镜像安装对应的Linux操作系统,安装好之后, ...

  9. 2017年最好的6个WEB前端开发手册下载

    php中文网为你推荐6个web前端开发相关手册下载,适合web开发人员和php web开发人员进行下载参考学习! 一. html5中文手册 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精 ...

  10. 源码阅读—Iterator接口和LIstIterator接口

    在继续看ArrayList源码之前,先了解Iterator接口和ListIterator接口,下篇文章详细讲解ArrayList是如何实现它们的. 我们知道,接口只是一种规范,当继承接口并实现其中的方 ...