Dropzone使用总结
前几天，公司后台接手做了一下啊，其中有项功能是需要上传图片等数据。在此使用了dropzone框架，现来总结一下使用该框架和在使用过程中所遇到的问题。
先放上dropzone官网，http://www.dropzonejs.com/。官网对各API和各种处理也比较详细，这里就仅写一下在我的项目中所呈现的内容和注意的点吧。
在我的项目中，使用的是类似官网demo的例子
在项目中的需求是，需要用户拖曳图片或通过文件夹选取图片，支持预览，每次最多只能上传3张图片，每张图片大小不允许超过2MB。Ok，发现dropzone都能很容易的实现这些需求和功能。废话不多说，代码展示：
1、首先引入dropzone，在官网可下载，同时在页面中引入dropzone样式和js文件
<link href="../../views/assets/global/plugins/dropzone/css/dropzone.css" rel="stylesheet"/> <script src="../../views/assets/global/plugins/dropzone/dropzone.js"></script>
2、在html页面中，没有过多的要求，也没有进行什么修改，直接使用dropzone样式即可
<div class="dropzone"></div>
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("<button class='btn btn-sm btn-block'>移除</button>"); 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<String> playerAccountManager(MultipartHttpServletRequest request) { InputStream is = null; Map<String, Object> res = new HashMap<String, Object>(); try { Iterator<String> itr = request.getFileNames(); Map<String, String[]> requestParams = request.getParameterMap(); Map<String, String> params = new HashMap<String, String>(); for (Entry<String, String[]> entry : requestParams.entrySet()) { 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 为图片文件名称。然后进行读流存储操作。将图片存储到指定路径。
