DDR爱好者之家

基于jquery ajax的多文件上传进度条过程解析
站长资源 2024/11/25 佚名
59 1538
DDR爱好者之家 Design By 杰米

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

效果图

基于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="/UploadFiles/2021-04-02/jquery.js">


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





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米