前端代码,关于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({ //配置dropzone url: "${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时需要触发上传 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>
java后台接收保存文件:
@RequestMapping(value = "uploadImg", method = RequestMethod.POST, produces = "application/json;charset=utf-8") @ResponseBody public 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; }