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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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的字符串用法小结
2010/06/08 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
基于django传递数据到后端的例子
2019/08/16 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
食品业务员岗位职责
2014/03/18 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
倡议书格式
2014/08/30 职场文书
秋季运动会开幕词
2015/01/28 职场文书
先进个人总结范文
2015/02/15 职场文书
人事任命通知书
2015/04/21 职场文书
主持人开场白台词
2015/05/29 职场文书
学习党章心得体会2016
2016/01/15 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android