引入相关的js和css
(一)单文件上传实例:
<!--轮播图-->
<div class="form-group">
<label class="col-sm-3 control-label ">轮播图:</label>
<div class="col-sm-8">
<input type="hidden" id="BannarImgId" name="BannarImgId">
<div id="bannarzone" class="dropzone" style="min-height: 120px"></div>
</div>
</div>
// 缩略图片拖拽区域=============================================
var myAvatarzone = new Dropzone("#avatarzone", {
url: "/FileController/uploadAvatar",//文件提交地址
method: "post", //也可用put
paramName: "avatar", //默认为file
maxFiles: 1,//一次性上传的文件数量上限
maxFilesize: 2, //文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
addRemoveLinks: true,
parallelUploads: 1,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage: '拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传1个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage: "浏览器不受支持",
dictFileTooBig: "文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init: function () {
this.on("addedfile", function (file) {
//上传文件时触发的事件
});
this.on("success", function (file, data) {
//上传成功触发的事件
if (data != null && data != "") {
$("#avatarImgId").val(data.data);
}
});
this.on("error", function (file, data) {
//上传失败触发的事件
});
this.on("removedfile", function (file) {//删除文件触发结果
//console.log(file);
$("#avatarImgId").val("");
});
}
});
-
后台接受:
//自己的方法
@PostMapping("/uploadAvatar")
@ResponseBody
public AjaxResult updateAvatar(@RequestParam("avatar") MultipartFile avatar) {
try {
if (!avatar.isEmpty()) {
//上传文件、将文件路径等信息存储到表
String id = phoneFileService.insertSelective(avatar);
if (id != null) {
return AjaxResult.successData(200, id);
}
}
return error();
} catch (Exception e) {
return error(e.getMessage());
}
}
(二)多文件上传实例:
注意事项:
1. uploadMultiple:true,设置可以上传多个附件,请注意后台收到的参数;
2.后台接收的参数是数组类型@RequestParam("bannar[ ]") MultipartFile[ ] bannar
<!--轮播图-->
<div class="form-group">
<label class="col-sm-3 control-label ">轮播图:</label>
<div class="col-sm-8">
<input type="hidden" id="BannarImgId" name="BannarImgId">
<div id="bannarzone" class="dropzone" style="min-height: 120px"></div>
</div>
</div>
// 轮播图片拖拽区域=============================================
var myBannarzone = new Dropzone("#bannarzone", {
url: "/FileController/uploadBannar",//文件提交地址
method: "post", //也可用put
paramName: "bannar", //默认为file
maxFiles: 8,//一次性上传的文件数量上限
uploadMultiple:true,
maxFilesize: 2, //文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
addRemoveLinks: true,
parallelUploads: 8,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage: '拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传8个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage: "浏览器不受支持",
dictFileTooBig: "文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init: function () {
this.on("addedfile", function (file) {
//上传文件时触发的事件
});
this.on("success", function (file, data) {
//上传成功触发的事件
if (data != null && data != "") {
$("#BannarImgId").val(data.data);
}
});
this.on("error", function (file, data) {
//上传失败触发的事件
});
this.on("removedfile", function (file) {//删除文件触发结果
//console.log(file);
$("#BannarImgId").val("");
});
}
});
@PostMapping("/uploadBannar")
@ResponseBody
public AjaxResult uploadBannar(@RequestParam("bannar[]") MultipartFile[] bannar) {
System.out.print("获取到的bannar的数量是====="+bannar.length);
try {
if (bannar != null && bannar.length > 0) {
String id = phoneFileService.insertBannar(bannar);
if (id != null) {
return AjaxResult.successData(200, id);
}
}
return error();
} catch (Exception e) {
return error(e.getMessage());
}
}