form表单的多文件上传,具体内容如下
formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单
使用
rush:js;">
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 + ' 个文件');
});
rush:js;">
$('#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.prev
IoUsElementSibling.prev
IoUsElementSibling.textContent;
var deleteIndex;
//将不
删除的放入数组中
$.each(allFile,item) {
if(item.name == deleteName){
deleteIndex = index;
}else {
saveFile.push(item);
}
});
allFile.splice(deleteIndex,1);
//表单数据重置
formData.set("
norm",type);
formData.delete('UploadForm[excelFiles][]');
//将不
删除的数组追加的formData中
$.each(saveFile,item) {
formData.append('UploadForm[excelFiles][]',item);
});
e.target.parentNode.parentNode.remove();
var fileCount = $('#files').find('tr').length;
$('#fileName').html('共上传 ' + fileCount + ' 个文件');
});
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,item) {
$(item).css("
display","none");
});
$('#files').append('
文件下载}).fail(function(res) {
alert("文件上传失败:" + res.msg);
});
}else {
alert("请选择需要上传的文件!");
}
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
相关文章
前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...