html,隐藏 input: javascript:<div>
<input type="file" id="file1" style="display: none" />
<input type="file" id="file2" style="display: none" />
<div class="layui-upload">
<button type="button" id="file1Btn">选择 Excel 表 1</button>
<button type="button" id="file2Btn">选择 Excel 表 2</button>
<button type="button" class="layui-btn" id="startCombine">开始上传</button>
</div>
</div>
var form = new FormData(); // FormData 对象
function UploadFiles(fileObj1, fileObj2) {
form.append("file1", fileObj1); // 文件对象
form.append("file2", fileObj2);
$.ajax({
url: "xxx", //url地址
type: "POST", //上传方式
data: form, // 上传 formdata 封装的数据
dataType: "JSON",
cache: false, // 不缓存
processData: false, // jQuery 不要去处理发送的数据
contentType: false, // jQuery 不要去设置 Content-Type 请求头
success: function(data) {
//成功回调
console.log(data);
alert("上传成功!");
},
error: function(data) {
//失败回调
alert("上传失败!");
}
});
}
function checkFileType(e) {
var file = e.target.files[0]; //js 获取文件对象
if (file) {
var file_typename = file.name.substring(file.name.lastIndexOf("."));
if (file_typename === ".xlsx" || file_typename === ".xls") {
return file;
} else {
alert("选择的文件中包含不支持的格式!");
}
}
}
var fileObj1, fileObj2;
$("#file1Btn").click(function() {
$("#file1").click();
$("#file1").change(function(e) {
fileObj1 = checkFileType(e);
});
});
$("#file2Btn").click(function() {
$("#file2").click();
$("#file2").change(function(e) {
fileObj2 = checkFileType(e);
});
});
$("#uploadFilesBtn").click(function() {
UploadFiles(fileObj1, fileObj2);
});
· 转载请注明 https://tangkaichuan.cn/jquery-multiple-file-upload/