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

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

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

效果图

前端代码,基于jquery

   主页 
名称大小进度结果

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

以上就是基于jquery ajax的多文件上传进度条过程解析的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程