一。body
<input type="file" id="md5File" multiple="multiple" name="file2" />
二。JS
第一种
$('#md5File').fileinput({
language: 'zh',
uploadUrl: '/dataImport/upload',
showCaption: true,//是否显示被选文件的简介
showUpload: true,//是否显示上传按钮
showRemove: true,//是否显示删除按钮
showClose: true,//是否显示关闭按钮
enctype: 'multipart/form-data',
uploadAsync:false, //false 同步上传,后台用数组接收,true 异步上传,每次上传一个file,会调用多次接口
layoutTemplates: {
actionUpload: ''//就是让文件上传中的文件去除上传按钮
// actionDelete: '',//去除删除按钮
},
browseClass: 'btn btn-primary',
maxFileCount: 2,
minFileCount : 1
}).on('fileuploaded', function (event, data) {
alert("异步成功")
debugger
//异步上传成功结果处理
}).on('fileerror', function (event, data, msg) {
//异步上传失败结果处理
alert("异步失败");
debugger
console.log(event, data, msg);
}).on('fileuploaderror', function (event, data, msg) {
//同步上传失败结果处理
alert("同步失败");
debugger
console.log(event, data, msg);
}).on('filebatchuploadsuccess', function(event,data,previewId,index) {
//同步上传回调
if (data.response.code == web_status.SUCCESS) {
$.modal.alertSuccess("上传成功");
}else if (data.response.code == web_status.FAIL){
$.modal.alertWarning(data.response.msg)
} else {
$.modal.alertError("上传失败")
}
});
第二种
function initModelz() {
//样式初始化
$("#indicator_fileinput1").fileinput({
'theme': 'explorer-fas',
'uploadUrl': ctx + 'beforehand/indicator/upload',
enctype: 'multipart/form-data',
//maxFileCount: 1,
showRemove: false,
showClear: false,
showUpload: false,
overwriteInitial: false,
initialPreviewAsData: false,
initialPreview: false,
});
//选着文件后事件
$("#indicator_fileinput1").on("filebatchselected", function (event, files) {
for (var index in files) {
var formData = new FormData();
formData.append('fileName', files[index].name);
formData.append('file', files[index].file);
formData.append('projectId', "0");
$.ajax({
url: ctx + 'beforehand/officeEfficiency/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (result) {
debugger;
if (result.code == 500) {
return;
}
result.id = index;
// rowFiles.push(result);
// 文件上传
$("#indicator_fileinput1").fileinput("upload");
}
});
}
});
}
汇总
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showRemove: false,//显示移除按钮
showClear: false,
showPreview:true,//是否显示预览
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
initialCaption: [
JSON.stringify(projectFileList)
],
fileActionSettings:{showUpload: false}, // 控制上传按钮是否显示
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
接收控制器
@PostMapping("/upload")
@ResponseBody
public void upload(@RequestParam("file2") MultipartFile file) throws IOException{
System.out.println(file);
}