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


Posted in jQuery onSeptember 11, 2019

这篇文章主要介绍了基于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="/javascripts/jquery.js"> </script>
  
 <script type="text/javascript">
   
 ;(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 += '<tr>'+
                '<td>'+ item.name +'</td>'+
                '<td>'+ FormatSize (item.size) +'</td>'+
                '<td class="per">0</td>'+
                '<td class="result"></td>'+
              '</tr>';
         }
          
         $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]; 
} 
 </script>
</html>

后端代码,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 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
You might like
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
深入理解PHP中的global
2014/08/19 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
航空学院求职信
2014/06/11 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
个人自荐书怎么写
2015/03/26 职场文书
运动会通讯稿300字
2015/07/20 职场文书
同学聚会祝酒词
2015/08/10 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
MySQL实现配置主从复制项目实践
2022/03/31 MySQL