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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
webpack3之loader全解析
2017/10/26 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python 负数取模运算实例
2020/06/03 Python
详解python tcp编程
2020/08/24 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
高中军训的心得体会
2014/09/01 职场文书
社会实践活动总结格式
2015/05/11 职场文书
会计实训总结范文
2015/08/03 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python