JavaScript实现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( '' +
     ''+fileName+'' +
     ''+(item.size / 1024).toFixed(2)+'K' +
     '' +
     '');
  //追加文件
  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('文件下载')
  }

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

 });

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。