dropzone上传文件

先上张效果图吧

1.引入dropzone的js和css文件

2.html这里我用了一个form,当然你也可以直接用一个div,无论你用什么都要加上class="dropzone"

3.js

             var fileArr = new Array();
             jQuery(function($){
                 Dropzone.autoDiscover = false;
                 Dropzone.options.myAwesomeDropzone = false;
             try {
               $(".dropzone").dropzone({
                 url:"${pageContext.request.contextPath}/uploadController/upload.action",
                 method:"post",
                 paramName:"file",
                 autoProcessQueue:true,//自动上传
                 maxFilesize:1024, // MB
                 uploadMultiple:false,
                 parallelUploads:10,
                 acceptedFiles:".rar,.zip,.7z",
                 dictInvalidFileType:"支持的文件类型是.rar,.zip,.7z",
                 addRemoveLinks:true,
             //    maxFiles：   //指的是上传目录下的最大文件数
                 dictRemoveFile:"移除文件",
                 dictUploadCanceled:"取消",
                 dictCancelUploadConfirmation:"取消上传该文件?",
                 dictDefaultMessage:
                 "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖动文件</span>上传\
                 <span class='smaller-80 gre'>(或者点击上传)</span> <br /> \
                 <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",
                 dictResponseError:"文件上传失败!",
                 dictFileTooBig:"文件过大,上传失败!",
                 //change the previewTemplate to use Bootstrap progress bars
                 previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
                 init:function(){
                     this.on("addedfile",function(file,data) {
                         fileArr.push(file.upload.uuid);
                         //解决点击时重复发送请求
                         $(".dz-remove").each(function(index) {
                               if(!$(".dz-remove:eq(" + index + ")").attr("id")) {
                                   $(".dz-remove:eq(" + index + ")").attr("id",fileArr[index]);
                               }
                          }) 

                     })
                     this.on("success",function(file,data){
                         //var myDropzone = this;
                          $("#" + file.upload.uuid).click(function() {
                                 var fileName = $(this).parent().find(".dz-filename").text();
                                     if(window.confirm("确定要删除吗?")) {
                                          $.ajax({
                                              type:"POST",
                                              url:"${pageContext.request.contextPath}/uploadController/delete.action",
                                              data:{"fileName":fileName},
                                              dataType:"json",
                                              success:function(data){
                                                     // this.removeFile(file);
                                              }
                                          })
                                   }  

                         })

                     });
                     this.on("sending",function(file,data){

                     })
                     this.on("removedfile",function(file,data){

                     })

                       this.on("canceled",function(file,data) {
                          // alert("canceled");
                          this.removeFile(file);
                       }); 

                     this.on("error",function(file,data){

                     });
                     this.on("complete",function(file) {
                             if(file.status == "canceled" || file.status == "error") {
                                 var fileName = $("#" + file.upload.uuid).parent().find(".dz-filename").text();
                                 setTimeout(function() {
                                       $.ajax({
                                          type:"POST",
                                          url:"${pageContext.request.contextPath}/uploadController/delete.action",
                                          data:{"fileName":fileName},
                                          dataType:"json",
                                          success:function(data){
                                              if(data == "success") {
                                                 // alert("删除成功");
                                             }
                                          },
                                          error:function(ajax) {
                                              alert(ajax.status);
                                          }
                                     })
                                 },2000);
                         }
                     }) 

                 }
               });
             } catch(e) {
               alert('Dropzone.js does not support older browsers!');
             }

         });

注意事项:

1.关于parallelUploads,这个参数我看了很多博客,都没有介绍,于是我去官网查了下,发现这个参数是文件上传队列数量的意思,

什么意思呢?如果你设置为1,但你上传的时候选择了多个文件,那么这些文件只会1个1个的上传而不是多个同时上传

3.后台

如果你做的时候后台报了异常org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.springframework.web.multipart.MultipartFile]: Specified class is an interface,

请在MultipartFile参数前加上@RequestParam,关于这个注解是起什么作用,自行百度

接收文件

 @RequestMapping("/upload")
     public String upload(@RequestParam MultipartFile file,HttpSession session){
         if(file == null) {
             return "";
         }
         File newFile = null;
         InputStream is = null;
         BufferedOutputStream bos = null;
         BufferedInputStream  bis = null;
         try {
             String originalFilename = file.getOriginalFilename();
             byte[] buffer = new byte[1024];
             String dirPath = session.getServletContext().getRealPath("/") + "upload";
             File dir  = new File(dirPath);
             if(!dir.exists()) {
                 dir.getParentFile().mkdirs();
             }
             if(originalFilename != null && originalFilename.trim().length() > 0) {
                 newFile = new File(dirPath + "/" + originalFilename);
             }
             bos = new BufferedOutputStream(new FileOutputStream(newFile));
             is  = file.getInputStream();

             bis = new BufferedInputStream(is);
             int count = 0;
             while((count = bis.read(buffer)) != -1){

                 bos.write(buffer, 0,count);
             }
             bos.flush();

             String createTime = df.format(System.currentTimeMillis());
             FileBean fileBean = fileBeanService.findByName(originalFilename);
             if(fileBean == null) {
                 fileBean = new FileBean();
                 fileBean.setName(originalFilename);
             }
             fileBean.setCreateTime(df.parse(createTime));
             fileBeanService.add(fileBean);

         } catch (FileNotFoundException e1) {
             e1.printStackTrace();
         } catch (IOException e) {
             e.printStackTrace();
         } catch (ParseException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
         }finally{
             if(bis != null){
                 try {
                     bis.close();
                 } catch (IOException e) {
                     e.printStackTrace();
                 }
             }
             if(bos != null) {
                 try {
                     bos.close();
                 } catch (IOException e) {
                     e.printStackTrace();
                 }
             }

         }
         return "redirect:/uploadController/dropzone.action";
     }

2.关于移除和取消上传文件

如果你用了数据库,直接把对应的字段改成0就表示此文件不存在,可以不删除如果你打算真的删除时,执行delete方法前后尽量先让线程睡眠一段时间,否则容易引起IOException,事实上文件上传过程中点击取消,实现的思路是先把文件上传上来,然后再删除,直接执行删除也有可能引起IOException

ps:这也是3月初的时候用的插件,至今过了一个月了才抽出时间写写总结,在此记录下来给自己一个参考