这篇文章主要讲解了“怎么用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实现多文件上传进度条”的内容了,经过本文的学习后,相信大家对怎么用jquery+ajax实现多文件上传进度条这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!