前端代码，关于dropzone的配置我写在注释里了
<html><head><meta charset="utf-8" /><%@include file="/webmana/meta.jsp" %><title></title><link rel="stylesheet" type="text/css" href="${ctx }/common/static/dropzone/dropzone.css"/><link rel="stylesheet" type="text/css" href="${ctx }/common/static/dropzone/basic.css"/><style type="text/css">.dropzone{border:3px dashed #ddd;margin:20px;border-radius:5px;}</style></head><body><div class="cl pd-5 bg-1 bk-gray mt-20"><input type="hidden" name="classId" value="${classId}"/><span class="l"><a href="javascript:;" id="qr" class="btn btn-primary radius"><i class="Hui-iconfont"></i>提交</a><a href="javascript:;" id="cancel" class="btn btn-primary radius"><i class="Hui-iconfont"></i>取消</a><a href="javascript:;" onclick="uploadImg1()" class="btn btn-primary radius"><i class="Hui-iconfont"></i>关闭</a></span></div><div id="dropz" class="dropzone"><div id="pro"></div><div id="speed"></div><div id="time"></div></div><input type="hidden" name="file" id="file"/><%@include file="/webmana/footer.jsp" %><script>function uploadImg1(){parent.location.reload();layer_close()}Dropzone.autoDiscover = false$("#dropz").dropzone({ //配置dropzoneurl: "${ctx}/webmana/uploadImg", //文件上传的路径method:"post",maxFiles: 100, //一次上传的量maxFilesize: 1024, //M为单位//acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip", //可接受的上传类型acceptedFiles: ".jpg,.jpeg,.png",//autoProcessQueue: true,//是否自动上传，false时需要触发上传parallelUploads: 100, //手动触发时一次最大可以上传多少个文件paramName: "file",//后台接受文件参数名addRemoveLinks:true,filesizeBase: 1024,//uploadMultiple:true, //建议不要使用，否则保存不了文件dictDefaultMessage: "拖入需要上传的文件",//上传框默认显示文字dictMaxFilesExceeded: "您最多只能上传10个文件！",dictResponseError: '文件上传失败!',dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",dictFallbackMessage:"浏览器不受支持",dictFileTooBig:"文件过大上传文件最大支持.",init: function () {var mm = (new Date()).getTime();var alreadyUpload=0;var myDropzone = this, submitButton = document.querySelector("#qr"),cancelButton = document.querySelector("#cancel");myDropzone.on('addedfile', function (file) {//添加上传文件的过程，可再次弹出弹框，添加上传文件的信息});myDropzone.on('sending', function (data, xhr, formData) {//向后台发送该文件的参数formData.append('classId', jQuery('input[name=classId]').val());});myDropzone.on('success', function (files, response) {//文件上传成功之后的操作});myDropzone.on('error', function (files, response) {//文件上传失败后的操作});//上传过程myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {//console.log(byte)//progress为进度百分比$("#pro").text("上传进度：" + parseInt(progress) + "%");//计算上传速度和剩余时间var mm1=(new Date()).getTime();var timecha=(mm1-mm)/1000; //时间差mm=mm1;var uploadcha=bytes-alreadyUpload;//上传文件差alreadyUpload=bytes;var speed;var remain;var byteKb = byte/1024;var bytesKb = bytes/1024;var byteMb = byte/1024/1024;var bytesMb = bytes/1024/1024;if(byteKb <= 1024){speed = (uploadcha)/(1024*timecha).toFixed(2) ;remain=(byte - bytes)/1024;$("#dropz #speed").text("上传速率：" + speed+ " KB/s");}else{speed = (uploadcha/(1024*1024*timecha)).toFixed(2) ;remain=(byte - bytes)/1024/1024;$("#dropz #speed").text("上传速率：" + speed+ " MB/s");}$("#dropz #time").text("剩余时间："+arrive_timer_format(parseInt(remain/speed)));if(bytes >= byte){if(byteKb <= 1024){$("#dropz #speed").text("上传速率：0 KB/s");}else{$("#dropz #speed").text("上传速率：0 MB/s");}$("#dropz #time").text("剩余时间：0:00:00");}});submitButton.addEventListener('click', function () {//点击上传文件myDropzone.processQueue();//myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());//myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))});cancelButton.addEventListener('click', function () {//取消上传myDropzone.removeAllFiles();});}});//剩余时间格式转换：function arrive_timer_format(s) {var t;if(s > -1){var hour = Math.floor(s/3600);var min = Math.floor(s/60) % 60;var sec = s % 60;var day = parseInt(hour / 24);if (day > 0) {hour = hour - 24 * day;t = day + "day " + hour + ":";}else t = hour + ":";if(min < 10){t += "0";}t += min + ":";if(sec < 10){t += "0";}t += sec;}return t;}</script></body></html>
注意：
autoProcessQueue为true时默认自动上传所有文件，而设为false时手动触发默认一次只传两个，
设置parallelUploads: 100,可修改手动触发一次上传的数量
java后台接收保存文件：
@RequestMapping(value = "uploadImg", method = RequestMethod.POST, produces = "application/json;charset=utf-8")@ResponseBodypublic String uploadImg(@RequestParam(value = "file") MultipartFile[] files, //这样接收文件String classId,HttpServletRequest request) {try {Map<String,Object> params=new HashMap<String, Object>();String path="/resource/images/";int userId=((TSystemUser)request.getSession().getAttribute("USER")).getUserId();params.put("classId",classId);params.put("attachmentType","IMAGE");params.put("userId",userId);for (MultipartFile file : files) { //循环保存文件Map<String,String> name=uploadFile(file, request);params.put("attachmentUrl",path+name.get("saveName"));params.put("attachmentName",name.get("fileName"));attachmentService.saveFile(params);// attachmentService.saveImg(path);}// 返回前台return JSON.toJSONString("success");} catch (Exception e) {e.printStackTrace();return JSON.toJSONString("fail");}}public Map<String,String> uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {Map<String,String> result=new HashMap<String,String>();String fileName = file.getOriginalFilename();String basePath=request.getSession().getServletContext().getRealPath("/");String path=basePath+"resource/images/"; //设置文件保存路径// File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));String fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()).toLowerCase();String saveName=String.valueOf((new Date()).getTime()).substring(8)+(int)((Math.random()*999+1))+'.'+fileType;File tempFile = new File(path, String.valueOf(saveName));if (!tempFile.getParentFile().exists()) { //创建文件夹tempFile.getParentFile().mkdir();}if (!tempFile.exists()) {tempFile.createNewFile();}file.transferTo(tempFile);result.put("fileName",fileName);result.put("saveName",saveName);return result;}
