基于jquery ajax的多文件上传进度条过程解析
更新时间：2019年09月11日 14:27:09 作者：muamaker
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
效果图
前端代码，基于jquery
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
padding: 0;
margin: 0;
}
table{
width: 600px;
text-align: center;
}
</style>
</head>
<body>
<input type="file" id="imgsend" name="file" value="发送图片" multiple="multiple" />
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>名称</td>
<td>大小</td>
<td>进度</td>
<td>结果</td>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>xxx</td>
<td>100</td>
<td class="per">100%</td>
<td class="result">成功</td>
</tr>-->
</tbody>
</table>
</body>
<script type="text/javascript" src="/javascripts/jquery.js"> </script>
<script type="text/javascript">
;(function($){
$.fn.extend({
uploadFile:function(option){
var that = this;
var defau = {
type:"post",
cache:false,
url:"",
data:{},
processData:false,
contentType:false,
success:function(){},
error:function(){},
progress:function(){},
sendBefore:function(){},
filter:[], //可以接受的文件后缀
upName:true //是否对文件名称转化大写比对
}
option = $.extend(true, defau, option);
var fileP = that.attr("name") || "file"; //传给后端得 file对应字段
console.log(fileP)
var files = that[0].files;
option.sendBefore(files); //发送之前
for(var i = 0,len = files.length; i < len; i++ ){
var fs = files[i];
var fnameArr = fs.name.split('.');
var fNmae = fnameArr.pop();
var str = '';
if(option.upName){
fNmae = fNmae.toUpperCase();
}else{
fNmae = fNmae.toLowerCase();
}
if(option.filter.length > 0 && option.filter.indexOf(fNmae) !== -1){
option.error("文件后缀不符",i);
continue;
}
fileUpload(files[i],i);
}
//开始文件上传
function fileUpload(file,index){
var fd = new FormData();
fd.append(fileP,file);
//追加其他参数
for(var i in option.data){
fd.append(i,option.data[i]);
}
$.ajax({
url: option.url,
type: option.type,
data: fd,
cache: option.cache,
processData: option.processData,
contentType: option.contentType,
success:function(data){
option.success(data,index);
},
error:function(error){
console.log(error);
option.error(error,index);
},
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
file.loaded = loaded;
file.total = tot;
file.percent = per + '%';
file.index = index;
option.progress(file);
}
}
return that;
}
});
})($,window);
//发送图片
var $table = $("table tbody");
$("#imgsend").on('change',function(){
var that = this;
$(that).uploadFile({
url:"/api/file",
data:{},
filter:[], //后缀文件筛选
sendBefore:function(files){
//开始之前
console.log(files);
var str = '';
for(var i = 0; i < files.length; i++){
var item = files[i];
str += '<tr>'+
'<td>'+ item.name +'</td>'+
'<td>'+ FormatSize (item.size) +'</td>'+
'<td class="per">0</td>'+
'<td class="result"></td>'+
'</tr>';
}
$table.html(str);
},
success:function(data,index){
//某个文件传完
var $tr = $table.find('tr').eq(index);
$tr.find('.result').html("成功");
},
error:function(err,index){
//某个文件报错
$tr.find('.result').html("失败");
},
progress:function(file){
//某个文件的上传进度
// file.loaded 已经上传的
// flie.total 总量
// file.percent 百分比
// file.index 第多少个文件
var $tr = $table.find('tr').eq(file.index);
$tr.find('.per').html(file.percent);
console.log(file.name + ":第" + file.index + '个:' + file.percent);
}
});
});
//文件大小格式化
function FormatSize (fileSize) {
var arrUnit = ["B", "K", "M", "G", "T", "P"],
baseStep = 1024,
unitCount = arrUnit.length,
unitIndex = 0;
while(fileSize >= baseStep && unitIndex < unitCount - 1){
unitIndex++;
fileSize /= baseStep;
}
fileSize = fileSize.toFixed(2);
return fileSize + " " + arrUnit[unitIndex];
}
</script>
</html>
后端代码，nodejs+express
const multiparty = require('multiparty');
var fs =require("fs");
router.post('/api/file', function(req, res, next) {
//生成multiparty对象，并配置上传目标路径
const form = new multiparty.Form()
// //设置编辑
form.encoding = 'utf-8'
// //设置文件存储路径
form.uploadDir = "./public/static/files/"
// //设置单文件大小限制
//form.maxFilesSize = 2 * 1024 * 1024
// form.maxFields = 1000; 设置所以文件的大小总和
// 上传完成后处理
form.parse(req, (err, fields, files) => {
if (err) {
console.log("parse:",err);
res.json({"success":"error"});
} else {
const inputFile = files.file[0];
const uploadedPath = inputFile.path
const imgtype = inputFile.originalFilename;
const inPath = `./public/static/files/${imgtype}`; //重命名的路径
// 判断是否存在./dist/static/files文件
fs.stat('./public/static/files', (err, stats) => {
if (JSON.stringify(stats) === undefined) {
fs.mkdirSync('./public/static', 0777)
fs.mkdirSync('./public/static/files', 0777)
}
storeFiles(uploadedPath, fields, inPath)
});
}
});
function storeFiles(uploadedPath, fields, inPath) {
//重命名为真实文件名
fs.rename(uploadedPath, inPath, (err) => {
if (err) {
console.log("rename:",err);
res.json({"success":"error"});
} else {
res.json({"success":"hahha"});
}
});
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了前端如何使用pdf.js实现pdf转为图片功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
用javascript实现的查找父节点的代码，方法比较不错2008-06-06
这篇文章主要是对JavaScript中delete操作符不能删除的对象进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间， 七拼八凑，总算是把这个效果写出来了。哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深， 时间一长，再重新写估计也难，所以把当时的思路记录一下！也希望大虾指点一下！2008-05-05
本篇文章主要介绍了JavaScript用二分法查找数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家带来一篇JS常用字符串方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本章将专门介绍与执行上下文创建阶段直接相关的最后一个细节——this是什么？以及它的指向到底是什么，感兴趣的朋友跟随小编一起看看吧2021-04-04
这篇文章主要为大家详细介绍了微信小程序计算器实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于JavaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
函数是一块js代码块,被定义一次但可以执行和调用多次,js中的函数也是对象可以像其他对象那样操作和执行,js函数也被称为函数对象,本文给大家介绍JS函数的返回值如何使用,感兴趣的朋友跟随小编一起看看吧2024-02-02
最新评论