JavaScript实现form表单的多文件上传


Posted in Javascript onMarch 27, 2020

form表单的多文件上传,具体内容如下

formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单

使用<form>表单初始化FormData对象的方式上传文件

<!--文件上传-->
 <form id="uploadForm" enctype="multipart/form-data">
 <div class="row" style="margin-top: 20px;">
 <div class="form-group col-md-12" id="file">  
  <input type="hidden" name="_csrf-application"
   value="<?= $csrf ?>">
  <div class="form-group field-uploadform-excelfiles" style="margin-left: 30px;">
  <label class="control-label btn btn-primary"
   for="uploadform-excelfiles">选择文件</label>
  <input type="file" id="uploadform-excelfiles" name="UploadForm[excelFiles][]"
   multiple class="attachment-upload" accept=".xlsx">
  <input type="button" id="fileUpload" value="上传文件" class="btn btn-success" style="margin-left: 15px;">
  <div class="help-block"></div>
  <div id="fileName"></div>
  </div>

 </div>
 </div>
 <table role="presentation" class="table"><tbody id="files"></tbody></table> 
</form>

注意:

1. 使用formData对象进行表单上传必须要为form添加enctype="multipart/form-data"属性
2. 使用formData对象进行表单上传必须要对其开始填入的值按照name属性放入该对象中,不能开始使用action上传,后面使用formData进行上传,这样会导致上传数据出现错误

获取change事件改变的文件

var fileList;
 var allFile = [];
 //FormData对象初始化
 var form = document.getElementById("upload-form");
 var formData = new FormData(form);
 $("#uploadform-excelfiles").on('change', function (e) {
 //获取表单数据并传入formData中
 var norm = $("#norm").val();
 var major = $("#major").val();
 var type = $("#type").val();
 formData.set("norm",norm);
 formData.set("major",major);
 formData.set("type",type);

 var fileError = 0;
 fileList = e.currentTarget.files;
 $.each(fileList, function (index, item) {
  var fileName = item.name;
  var fileEnd = fileName.substring(fileName.indexOf("."));
  //上传文件格式判断
  if (fileEnd == ".xlsx") {
  allFile.push(item);
  $('#files').append( '<tr style="padding-top: 7px;">' +
     '<td>'+fileName+'</td>' +
     '<td>'+(item.size / 1024).toFixed(2)+'K</td>' +
     '<td><input type="button" class="btn btn-danger delete" value="删除"></td>' +
     '</tr>');
  //追加文件
  formData.append('UploadForm[excelFiles][]',item);
  } else {
  fileError++;
  }
 });
 if (fileError > 0) {
  alert("只能上传 “.xlsx” 格式的文件!");
  document.getElementById("upload-form").reset();
  return;
 }

 var fileCount = $('#files').find('tr').length;
 $('#fileName').html('共上传 ' + fileCount + ' 个文件');

 });

删除按钮事件

$('#files').on('click','.delete',function (e) {
 var saveFile = [];
 var norm = $("#norm").val();
 var major = $("#major").val();
 var type = $("#type").val();
 var deleteName = e.target.parentNode.previousElementSibling.previousElementSibling.textContent;
 var deleteIndex;
 //将不删除的放入数组中
 $.each(allFile,function (index, item) {
  if(item.name == deleteName){
   deleteIndex = index;
  }else {
  saveFile.push(item);
  }
 });
 allFile.splice(deleteIndex,1);
 //表单数据重置
 formData.set("norm",norm);
 formData.set("major",major);
 formData.set("type",type);
 formData.delete('UploadForm[excelFiles][]');
 //将不删除的数组追加的formData中
 $.each(saveFile,function (index, item) {
  formData.append('UploadForm[excelFiles][]',item);
 });

 e.target.parentNode.parentNode.remove();
 var fileCount = $('#files').find('tr').length;
 $('#fileName').html('共上传 ' + fileCount + ' 个文件');

 });

文件上传事件

$("#fileUpload").on('click',function () {
 var len = formData.getAll('UploadForm[excelFiles][]').length;
 $("#overlay").show();
 if(len > 1){
  var deleteBtn = $(".delete");
  //通过ajax进行上传
  $.ajax({
   url: '/finalize/upload',
   type: 'POST',
   cache: false,
   data: formData,
   processData: false,
   contentType: false
  }).done(function(res) {
   if(res.code == 'ok'){
   //进度条设置
   var value = 0;
   var timer2 = setInterval(function () {
    value ++;
    $("#progress").css('width', value + "%");
    if (value == 120) {
    clearInterval(timer2);
    $("#overlay").hide();
    alert("文件上传成功!");
    }
   }, 50);
   //删除对应按钮
   $("#fileUpload").css("display","none");
   $.each(deleteBtn,function (index, item) {
   $(item).css("display","none");
   });
   $('#files').append('<tr><td><td><td><a type="button" class="btn btn-success pull-right" id="fileDown" href="/finalize/get-file?id=' + res.data.id + '" >文件下载</a></td></tr>')
  }

  }).fail(function(res) {
  alert("文件上传失败:" + res.msg);
  });
 }else {
  alert("请选择需要上传的文件!");
 }

 });

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
javascript学习小结之prototype
Dec 03 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
全面解析vue中的数据双向绑定
May 10 #Javascript
利用forever和pm2部署node.js项目过程
May 10 #Javascript
javascript简单链式调用案例分析
May 10 #Javascript
Angular.JS通过指令操作DOM的方法
May 10 #Javascript
JS实现队列的先进先出功能示例
May 10 #Javascript
You might like
PHP输入流php://input介绍
2012/09/18 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScript的面向对象(二)
2006/11/09 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
python多线程socket编程之多客户端接入
2017/09/12 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
用python对oracle进行简单性能测试
2020/12/05 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
十月份红领巾广播稿
2014/01/22 职场文书
社区娱乐活动方案
2014/08/21 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
公司财务管理制度
2015/08/04 职场文书
优化Mysql查询的示例
2022/04/26 MySQL