配置 pox.xml
<!-- 文件上传与下载 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
springmvc配置
<!--配置文件上传处理着-->
<bean name="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>
FileUploadController.class
@RestController
@RequestMapping("/file")
public class FileUploadController {
@RequestMapping("/fileUpload")
public Object fileUpload(@RequestParam("dropFile") CommonsMultipartFile file) throws IOException {
Map<String,Object> map = new HashMap<String, Object>();
String fileName = System.currentTimeMillis() + file.getOriginalFilename();
File newFile = new File("D:\\upload\\project\\" + fileName);
file.transferTo(newFile);
map.put("status",200);
map.put("url",newFile.getAbsolutePath());
return map;
}
}
html
<link rel="stylesheet" href="dropzone/basic.min.css"/>
<link rel="stylesheet" href="dropzone/dropzone.min.css"/>
<script src="dropzone/dropzone.min.js"></script>
<div class="form-group has-success has-feedback">
<div id="dropzoneDiv" class="dropzone"></div>
<input type="hidden" id="imgUrl">
</div>
js
<script>
Dropzone.options.dropzoneDiv = {
url: "file/fileUpload", // 文件提交地址
method: "post", // 也可用put
paramName: "dropFile", // 默认为file
maxFiles: 1,// 一次性上传的文件数量上限
maxFilesize: 4, // 文件大小,单位: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, result) {
// 上传成功触发的事件
console.log(result);
$("#imgUrl").val(result.url);
});
this.on("error", function (file, data) {
// 上传失败触发的事件
});
this.on("removedfile", function (file) {
// 删除文件时触发的方法
});
}
}
</script>