正文

不带插件，自己写js，实现批量上传文件及进度显示

盼盼and涵涵  2022-02-11  638

关键词：

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

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

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

条件：我采用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文件部分：这是关键，

 1 /**
 2  * 
 3  */
 4 var i=0;
 5 var j=0;
 6 $(function(){
 7     
 8     $("#fileMutiply").change(function eventStart(){
 9         var ss =this.files; //获取当前选择的文件对象
10          for(var m=0;m<ss.length;m++){  //循环添加进度条
11                  
12                  efileName = ss[m].name ;
13          if (ss[m].size> 1024 * 1024){
14             sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB';
15             }
16         else{
17             sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB';
18             }
19      
20              
21          $("#test").append(
22          "<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>");
23      
24                  }
25          sendAjax();
26           function sendAjax() {  
27                   if(j>=ss.length)   //采用递归的方式循环发送ajax请求
28                 {  
29                   $("#fileMutiply").val("");
30                        j=0;
31                     return;  
32                 }
33                var formData = new FormData();
34                formData.append('files', ss[j]);  //将该file对象添加到formData对象中
35                     $.ajax({
36                         url:'fileUpLoad.action',
37                         type:'POST',
38                         cache: false,
39                         data:{},//需要什么参数，自己配置
40                         data: formData,//文件以formData形式传入
41                         processData : false, 
42                        //必须false才会自动加上正确的Content-Type 
43                        contentType : false , 
44                     /*   beforeSend:beforeSend,//发送请求
45                        complete:complete,//请求完成
46         */            xhr: function(){      //监听用于上传显示进度
47                             var xhr = $.ajaxSettings.xhr();
48                             if(onprogress && xhr.upload) {
49                              xhr.upload.addEventListener("progress" , onprogress, false);
50                              return xhr;
51                             }
52                            } ,
53                         success:function(data){
54                      
55                         
56                             $(".filelist").find("#"+j+"file").remove();//移除进度条样式
57                              j++; //递归条件
58                             sendAjax();
59                             
60                    //     }
61                             
62                         },
63                         error:function(xhr){
64                           alert("上传出错");
65                         }                              
66                     });
67                 
68               
69                 } 
70         
71     })
72     
73     
74        function onprogress(evt){
75          
76           var loaded = evt.loaded;     //已经上传大小情况 
77           var tot = evt.total;      //附件总大小 
78           var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
79          $(".filelist").find("#"+j+"pps").text(per +"%");
80          $(".filelist").find("#"+j+"barj").width(per+"%");
81          };
82     
83     
84 })

如果大家有什么问题可以提出来，一起交流，学习。有什么不对的地方也指出来，我也虚心学习。

自己也是刚写博客，您们的赞是我写博客的动力，谢谢大家。

使用jquery.form.js实现文件上传及进度条前端代码

...实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。需要解释下我的结构，#upload-input-file的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能，#... 查看详情

基于jquery插件uploadify实现实时显示进度条上传图片

...51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料，感兴趣的小伙伴们可以参考一下先了解了解Uploadify，具体内容如下Uploadify是一个简单易用的多文件上传方案。作为一... 查看详情

文件上传和进度条

...据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但如何根据读取的数据显示进度条。我是否应该根据读取的数据量向JS代码发送计数响应，如果可以，如何实现？或者有人... 查看详情

java多文件上传显示进度条

用java或者js实现对多文件上传，并显示进度条，可以只显示总进度。手上有类似代码的朋友联系我，扣-15080818，跪求！使用 apachefileupload ,springMVC jquery1.6x,bootstrap 实现一个带进度条的多文件上传，由于fileupload的局限，暂... 查看详情

Dropzone.js 上传进度条不显示

】Dropzone.js上传进度条不显示【英文标题】：Dropzone.jsuploadprogressbarnotshowing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情

博客内容进度插件的实现

...有种泄气的冲动。但，如果能够提供一个博客内容进度的插件，根据所读内容的多少，显示进度条，让自己对所读的内容进度心里有数，可以让自己平静下来，一点一点读下去。本文将详细介绍博客内容进度插件的实现效果... 查看详情

哪个javascript框架支持ajax方式的文件上传

7款基于JavaScript和AJAX的文件上传插件，这些插件基本上都能实现以下功能：多文件上传，拖拽操作，实时上传进度，自定义上传限制1.jQueryFileUpload具有多文件上传、拖拽、进度条和图像预览功能的文件上传插件，支持跨域、分块... 查看详情

uploadifivestruts2实现图片上传

uploadify是来自国外的一款优秀的jQuery上传插件，主要功能是批量上传文件，带进度显示。下面以HTML5Version版本为例介绍uploadifive的使用，结合Struts2各软件版本如下：jQuery：1.8.0Struts2:2.3.16.3UploadiFive:1.2.2由于HTML5Version是收费的，但... 查看详情

javasftp文件上传下载及批量下载

...，X11转发，文件传输等，当然你也可以集成它的功能到你自己的应用程序。SFTP(SecureFileTransferProtocol)安全文件传送协查看详情

图片上传及显示（包含多文件）

...东西也忘记了。所以本篇博客ＢＺ决定记载一下，一方面自己回顾加深一下，另一方面供各位程序员学习。希望大神们对本文不对的地方进行批评指正！先在我们的html页面写上上传文件的文本框及图片显示所在的DIV，如下：1<... 查看详情

简单项目之批量上传

...量上传功能，以前都是用的网上现成的Uploadify、WebUpload等插件，心想既然是小项目还是不用插件，所以不如自己写一个（非插件）.　　1.页面　　批量上传页面　　1<formaction=""id="formid">2@Html.Hidden("filelist")3<table>4<tr>5... 查看详情

简单项目之批量上传

robotframework接口自动化-批量上传文件

...持单个上传。首先我们找一个支持文件上传的接口，或者自己写一个（有开发能力可动手实现.）我使用的接口如下:下面我们开始写上传文件的RF脚本之后，我们可以这样使用查看详情

.netmvc中使用webclient在后台下载文件，前台显示进度。

...条就好了。还有一种思路是websocket再有一般的文件上传的插件都是用flash插件写的，这样可以实现实时进度条参考技术A需要知道文件总大小;页面上用脚本设置定时器,每间隔一段时间(2s)发一次请求来查看当前文件大小;进度百分... 查看详情

异步上传文件（jquery.form）+进度条+上传到ftp服务器(代码片段)

...到ftp，总结一下分享我用的是jQuery.form.js上传ftp服务器，自己百度去搭建很简单的Talkischeap.Showmeyourcode. GitHub上面的源码：https://github.com/Vinkong/learngitaspx页面<%@PageLanguage="C#"Auto 查看详情

retrofit2文件上传下载及其进度显示

...介绍了Retrofit2的基本使用，这篇文章接着介绍使用Retrofit2实现文件上传和文件下载，以及上传下载过程中如何实现进度的显示。文件上传定义接口123@Multipart@POST("fileService")Call<User>uploadFile(@PartMultipartBody.Partfile);构造请求体上... 查看详情

js文件上传进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>XMLHttpRequest上传文件进度实现</title><scripttype="text/javascript">varxhr;varot;//varoloaded;//上传文件方法functionUp 查看详情

基于jquery很牛x的批量上传插件

...必备的工具之一，因此出现了出现了很多各式各样的上传插件!本文基于个人经验和使用从插件的：交互体验，易用性，文档，美观度出发，为大家推荐三款很NX的批量上传插件！下面三款插件的特点：1、简单易配置，2、带进度... 查看详情