Shulou(Shulou.com)06/01 Report--

This article mainly explains the "how to use jquery+ajax to achieve multi-file upload progress bar", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use jquery+ajax to achieve multi-file upload progress bar"!

Effect picture

Front-end code, based on jquery

Home page * {padding: 0; margin: 0;} table {width: 600px; text-align: center } name size progress result; (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: [], / / acceptable file suffix upName:true / / whether to convert uppercase comparison of file names} option = $.extend (true, defau, option) Var fileP = that.attr ("name") | | "file"; / / the corresponding field console.log (fileP) var files = that [0] .files passed to the backend; option.sendBefore (files); / / for before sending (var I = 0Len 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 ("File suffix does not match", I); continue;} fileUpload (Files [I], I) } / / start file upload function fileUpload (file,index) {var fd = new FormData (); fd.append (fileP,file) / / append other parameters for (var i in option.data) {fd.append (iMagneoption.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; / / Total attachment size var per = Math.floor (100*loaded/tot); / / percentage of uploaded file.loaded = loaded; file.total = tot; file.percent = per +'%'; file.index = index Option.progress (file);}} return that;}});}) ($, window); / / send var $table = $("table tbody"); $("# imgsend") .on ('change',function () {var that = this) $(that) .uploadFile ({url: "/ api/file", data: {}, filter: [], / / suffix file filter sendBefore:function (files) {/ / before 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}` / / determine whether the renamed path exists. / dist/static/files file 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) {/ / renamed to real filename fs.rename (uploadedPath, inPath, (err) = > {if (err) {console.log ("rename:", err); res.json ({"success": "error"});} else {res.json ({"success": "hahha"});});}) Thank you for your reading, the above is the content of "how to use jquery+ajax to achieve multi-file upload progress bar". After the study of this article, I believe you have a deeper understanding of how to use jquery+ajax to achieve multi-file upload progress bar, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.