前几天，公司后台接手做了一下啊，其中有项功能是需要上传图片等数据。在此使用了dropzone框架，现来总结一下使用该框架和在使用过程中所遇到的问题。
先放上dropzone官网，http://www.dropzonejs.com/。官网对各API和各种处理也比较详细，这里就仅写一下在我的项目中所呈现的内容和注意的点吧。
在我的项目中，使用的是类似官网demo的例子
在项目中的需求是，需要用户拖曳图片或通过文件夹选取图片，支持预览，每次最多只能上传3张图片，每张图片大小不允许超过2MB。Ok，发现dropzone都能很容易的实现这些需求和功能。废话不多说，代码展示：
1、首先引入dropzone，在官网可下载，同时在页面中引入dropzone样式和js文件
2、在html页面中，没有过多的要求，也没有进行什么修改，直接使用dropzone样式即可
3、ok，前面的准备工作就做好了。接下来，进行初始化我们的dropzone控件
Dropzone.autoDiscover = false;
var dropz = new Dropzone('div.dropzone',{
url : '../../xxx',
autoProcessQueue : false,// 如果为false，文件将被添加到队列中，但不会自动处理队列。
uploadMultiple : true, // 是否在一个请求中发送多个文件。
parallelUploads : 3, // 并行处理多少个文件上传
maxFiles : 3, // 用于限制此Dropzone将处理的最大文件数
maxFilesize : 2,
acceptedFiles: ".jpg,.gif,.png",
dictDefaultMessage:"拖拉图片文件到这里或者点击",
dictFallbackMessage:"你的浏览器不支持拖拉文件来上传",
dictMaxFilesExceeded:"文件数量过多",
dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",
init : function() { // dropzone初始化时调用您可以在此处添加事件侦听器
var myDropzone = this;
this.on("addedfile",function(file) {
var removeButton = Dropzone.createElement("");
removeButton.addEventListener("click",function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
},
sendingmultiple : function(file, xhr, formData) {// 在每个文件发送之前调用。获取xhr对象和formData对象作为第二和第三个参数，可以修改它们（例如添加CSRF令牌）或添加其他数据。
$.each(submitParams,function(key,value){
formData.set(key,value);
});
},
successmultiple : function(file, response){// 该文件已成功上传。获取服务器响应作为第二个参数。
},
completemultiple : function(file,data){
},)};
解析：init就是我们初始化的代码了，在初始化中，加入添加文件时间侦听器，可在增加文件时处理一些界面或者数据的手机。在此，即为增加的图片添加了个移除按钮，该按钮点击触发myDropzone.removeFile(file事件，则可实现在页面上添加移除等操作了。
url : '../../xxx', 该配置项必须在form之外的元素配置，还可以提供一个将被调用files并且必须返回url 的函数。该配置项连接了后台上传的地址，则后台可接收处理dropzone发送过来的数据。
autoProcessQueue : false,// 如果为false，文件将被添加到队列中，但不会自动处理队列
uploadMultiple : true, // 是否在一个请求中发送多个文件。
parallelUploads : 3, // 并行处理多少个文件上传
以上三项配置，可处理dropzone同时请求上传多个文件，在项目中，需求是3个，则parallelUploads设置为3。
maxFiles : 3, // 用于限制此Dropzone将处理的最大文件数
maxFilesize : 2,
acceptedFiles: ".jpg,.gif,.png",
dictDefaultMessage:"拖拉图片文件到这里或者点击",
dictFallbackMessage:"你的浏览器不支持拖拉文件来上传",
dictMaxFilesExceeded:"文件数量过多",
dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",
以上配置即根据需求所配置，各取所需，在官网中可查找更多的配置选项满足需求更改。
上传：
sendingmultiple : function(file, xhr, formData) {// 在每个文件发送之前调用。获取xhr对象和formData对象作为第二和第三个参数，可以修改它们（例如添加CSRF令牌）或添加其他数据。
$.each(submitParams,function(key,value){
formData.set(key,value);
});
},
由于autoProcessQueue配置为false，故需手动处理队列，在点击提交按钮时，触发dropz.processQueue();则可上传。在sendingmultiple中，可加入自己需要传入的参数，在这通过formData传入一些需要传入的参数，在后台通过request.getParameterMap();接收即可。
后台处理代码：
@RequestMapping(value = "/xxx", method = RequestMethod.POST)
public ResponseEntity
InputStream is = null;
Map
try {
Iterator
Map
Map
for (Entry
params.put(entry.getKey(), entry.getValue()[0]);
}
while (itr.hasNext()) {
String uploadedFile = itr.next();
MultipartFile file = request.getFile(uploadedFile);
String filename = file.getOriginalFilename();
is = file.getInputStream();
FileUtil.copyInputStreamToFile("F:/Test", is, filename);
}
res.put("code", 0);
} catch (Exception e) {
if (logger.isDebugEnabled()) {
logger.debug(e.getMessage());
}
e.printStackTrace();
res.put("code", 1);
res.put("msg", e.getMessage());
return new ResponseEntity<>(JSON.toJSONString(res), HttpStatus.INTERNAL_SERVER_ERROR);
} finally {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
res.put("msg", "Uploaded successfully");
return new ResponseEntity<>(JSON.toJSONString(res), HttpStatus.OK);
}
后台使用的是spring，通过配置MultipartHttpServletRequest，则接收时不用使httpServletRequest转换成MultipartHttpServletRequest，spring接收到的是MultipartHttpServletRequest请求，则自动会将请求转换成MultipartHttpServletRequest，后台代码直接处理即可。request.getFile(uploadedFile);
可逐一接收dropzone发送过来的图片，uploadedFile 为图片文件名称。然后进行读流存储操作。将图片存储到指定路径。