这篇文章主要介绍了基于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\"});
}
});
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容