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中的var_dump函数实现代码
Sep 07 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python实现SOM算法
2018/02/23 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
python绘制汉诺塔
2021/03/01 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
家长通知书家长评语
2014/04/17 职场文书
青年文明号口号
2014/06/17 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书