1.应用场景：
拖拽上传，可扩展化编程的操作空间较大。
2.导入
<link rel="stylesheet" href="plugins/min/basic.min.css"/>
<link rel="stylesheet" href="plugins/min/dropzone.min.css" />
<script src="plugins/min/dropzone.min.js"></script>
3.声明一个容器
<div id="dropz" class="dropzone"></div>
4.给容器添加属性与监听
<table align="center">
<td>商品名:
<td><input type="text" id="productName"/>
<td>商品图片:
<td><input type="hidden" id="picName"/>
<div id="dropzoneDiv" class="dropzone" style="width:200px;height:200px">
<td colspan="2">
<input type="button" value="提交" onclick="showVal()"/>
Dropzone.options.dropzoneDiv = {
url:"upload", // 文件提交地址（controller的方法）
method:"post", // 也可用put
paramName:"dropzFile", // 默认为file
maxFiles:1,// 一次性上传的文件数量上限
maxFilesize:5, // 文件大小，单位：MB
acceptedFiles:".jpg,.gif,.png,.jpeg,.txt,.doc,.docx", // 上传的类型
addRemoveLinks:true,
parallelUploads:1,// 一次上传的文件数量
//previewsContainer:"#preview", // 上传图片的预览窗口
dictDefaultMessage:'拖动文件至此或者点击上传',
dictMaxFilesExceeded:"您最多只能上传1个文件！",
dictResponseError:'文件上传失败!',
dictInvalidFileType:"文件类型只能是*.jpg,*.gif,*.png,*.jpeg,.txt,.doc,.docx。",
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictRemoveLinks:"删除",
dictCancelUpload:"取消",
init:function () {
this.on("addedfile", function (file) {
// 上传文件时触发的事件
});
this.on("success", function (file, data) {
// 上传成功触发的事件
console.log(file);
console.log(data);
$("#picName").val("static/upload/"+data.fileName);
});
this.on("error", function (file, data) {
// 上传失败触发的事件
});
this.on("removedfile", function (file) {
// 删除文件时触发的方法
console.log(file);
});
}
}
function showVal() {
alert($("#picName").val());
alert($("#productName").val());
}
</script>
5.controller
@Controller
public class UploadController {
@ResponseBody
@RequestMapping(value ="upload", method = RequestMethod.POST)
public Mapupload(MultipartFile dropzFile, HttpServletRequest request) {
System.out.println("inner upload");
System.out.println(dropzFile);
Map result =new HashMap();
// 获取上传的原始文件名
String fileName = dropzFile.getOriginalFilename();
// 设置文件上传路径
String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
// 获取文件后缀
String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
// 判断并创建上传用的文件夹
File file =new File(filePath);
if (!file.exists()) {
file.mkdirs();
}
// 重新设置文件名为 UUID，以确保唯一
file =new File(filePath, UUID.randomUUID() + fileSuffix);
System.out.println(file.getAbsolutePath());
if(!file.exists()){
try {
file.createNewFile();
}catch (IOException e) {
e.printStackTrace();
}
}
try {
// 写入文件
dropzFile.transferTo(file);
}catch (IOException e) {
e.printStackTrace();
}
// 返回 JSON 数据，这里只带入了文件名
result.put("fileName", file.getName());
return result;
}
}
