JS实现批量上传文件并显示进度功能
今天接受项目中要完成文件批量上传文件而且还要显示上传进度，一开始觉得这个应该不是很麻烦，当我在做的时候遇到了很多问题，很头疼啊。
不过看了别人写的代码，自己也测试过，发现网上好多都存在一些问题，并不是自己想要的。然后自己查阅各种资料，经过自己总结，最终完成了这个功能。
如果大家有什么问题可以提出来，一起交流，学习。有什么不对的地方也指出来，我也虚心学习。自己也是刚写博客，您们的赞是我写博客的动力，谢谢大家。
条件：我采用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" 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中三种异步上传文件方式
异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使
-
jQuery插件ajaxfileupload.js实现上传文件
AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam
-
js获取上传文件的绝对路径实现方法
在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
js实现上传文件添加和删除文件选择框
本文这里给大家说个用javascript实现的很实用的功能,是在上传附件的时候,可以动态地添加和删除文件选择框,然后一次性上传. 从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来都是一个原因造成的,那就是浏览器的兼容性.在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用.几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气. 具体两个函数是这样的: <scr
-
js实现点击按钮弹出上传文件的窗口
1.详细描述 在页面上设置一个"选择文件"按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() {
-
js 上传文件预览的简单实例
1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat
-
JS实现批量上传文件并显示进度功能
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑
-
ASP.NET插件uploadify批量上传文件完整使用教程
uploadify批量上传文件完整使用教程,供大家参考,具体内容如下 1.首先准备uploadify的js文件,网上一搜一大堆 2.上传页面UpFilePage.aspx 关键代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/h
-
php上传文件并显示上传进度的方法
本文实例讲述了php上传文件并显示上传进度的方法.分享给大家供大家参考.具体如下: 记得上传文件的时候要大点,不然还没看出来就上传完了,并且上传的文件不要太大,上G的就算了,2G的我试了,PHP受不了,我测试的是300多M的,记得要调整小php.ini参数啊 "选文件=>提交=>获取信息"要一气呵成哦^ ^ <?php $prefix = ini_get('session.upload_progress.prefix'); $name = ini_get('sessi
-
JS实现浏览上传文件的代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <div style="position:relative;width:380px;"> <iframe id="t_load" name="t_load" style="display: none"></iframe> <form action="" method="post" enctyp
-
TP3.2批量上传文件或图片 同名冲突问题的解决方法
本文实例为大家分享了TP3.2批量上传文件或图片的具体代码,并解决了同名冲突问题,供大家参考,具体内容如下 1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" method="post" > <p><input type="file" id="file3" name="ID[
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
JS简单验证上传文件类型的方法
本文实例讲述了JS简单验证上传文件类型的方法.分享给大家供大家参考,具体如下: function checkType(){ //得到上传文件的值 var fileName=document.getElementById("file_logo").value; //返回String对象中子字符串最后出现的位置. var seat=fileName.lastIndexOf("."); //返回位于String对象中指定位置的子字符串并转换为小写. var extensi
-
微信小程序 ES6Promise.all批量上传文件实现代码
微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.
-
SpringMVC多个文件上传及上传后立即显示图片功能
多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 package com.meng.upload; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRe
-
Egg.js 中 AJax 上传文件获取参数的方法
依赖 formidable 代码 前端 <fieldset style="margin: 20px; padding: 20px;"> <legend>单文件,Ajax</legend> <form id="form3"> <div> <input type="text" id="customName" placeholder="自定义文件名"