jquery ajax 上传进度,基于jquery ajax的多文件上传进度条过程解析

这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图

前端代码，基于jquery

主页

*{

padding: 0;

margin: 0;

}

table{

width: 600px;

text-align: center;

}

名称大小进度结果

;(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 += '

'+

'

'+ item.name +''+

'

'+ FormatSize (item.size) +''+

'

0'+

'

'+

'

';

}

$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];

}

后端代码，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"});

}

});

}

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。