前言
1、传额外参数
uploadExtraData:初始化时只能获取表单赋值数据,未赋值或修改的数据无法获取,所以需要用一个回掉函数
2、去除按钮
layoutTemplates:{
actionUpload: ''//去除上传预览缩略图中的上传按钮
close: ''//去除右上角X 清空文件按钮
//其它按钮去除,请查看源码中的【layoutTemplates】
}
3、上传成功后调用移除按钮
$(".fileinput-remove-button").click();
4、同步和异步上传
uploadAsync: false//是否为异步上传,默认(true)异步上传,你会发现上传多张图片,请求就会发送多次,每次只提交一张图片,如果想一次提交所有图片,则需要将uploadAsync设置为false
实现代码
$(document).ready(function () {
$("#fileinput").fileinput({
language: 'zh'//设置语言
, layoutTemplates: {
actionUpload: ''//去除上传预览缩略图中的上传按钮
, close: ''//去除右上角X 清空文件按钮
}
, allowedFileExtensions: ['jpg', 'png', 'jpeg']
, showUpload: true//是否显示上传按钮
, contentType: 'multipart/form-data; charset=UTF-8'
, uploadUrl: prefix + "/upload"
, maxFileSize: 20480//单位为kb,如果为0表示不限制文件大小
, overwriteInitial: false
, minFileCount: 1//表示同时最小上传的文件个数
, maxFileCount: 4//表示允许同时上传的最大文件个数
, uploadAsync: false//同步上传
, uploadExtraData: function () {//上传文件时额外传递的参数设置
return $('#form-advertisement-add').serializeJson();
}
}).on('filebatchuploadsuccess', function (event, data, previewId, index) {//批量上传成功结果处理
if (data.response.code != 0) {
$.modal.alert("文件上传失败,请稍后重试!");
return false;
}
//上传成功调用移除按钮
$(".fileinput-remove-button").click();
}).on('filebatchuploaderror', function (event, data, msg) {//批量上传错误结果处理
console.log(data);
$.modal.alert(msg);
return false;
});
});
@PostMapping("/upload")
@ResponseBody
public AjaxResult fileUpload(@RequestParam("file") MultipartFile[] file, Advertisement advertisement){
JSONArray jsonArray = new JSONArray();
try {
// 上传文件路径
String filePath = Global.getUploadPath();
// 上传并返回新文件名称
for (int i = 0; i < file.length; i++) {
JSONObject jsonObject = new JSONObject();
String fileName = FileUploadUtils.upload(filePath, file[i]);
jsonObject.put("fileUrl", fileName);
jsonArray.add(jsonObject);
}
// 获取当前的用户
SysUser currentUser = ShiroUtils.getSysUser();
//传入登录账号
advertisement.setCreateBy(currentUser.getLoginName());
advertisement.setFileId(JSON.toJSONString(jsonArray));
advertisementService.insertAdvertisement(advertisement);
} catch (Exception e) {
return AjaxResult.error("上传失败:" + e);
}
return AjaxResult.success("上传成功");
}