dropzone上傳文件

先上張效果圖吧

 

1.引入dropzone的js和css文件

2.html這里我用了一個form,當然你也可以直接用一個div,無論你用什么都要加上class="dropzone"

3.js

            var fileArr = new Array();  2             jQuery(function($){  3                 Dropzone.autoDiscover = false;  4                 Dropzone.options.myAwesomeDropzone = false;  5             try {  6               $(".dropzone").dropzone({  7                 url:"${pageContext.request.contextPath}/uploadController/upload.action",  8                 method:"post",  9                 paramName:"file",  10                 autoProcessQueue:true,//自動上傳  11                 maxFilesize:1024, // MB
                uploadMultiple:false,  13                 parallelUploads:10,  14                 acceptedFiles:".rar,.zip,.7z",  15                 dictInvalidFileType:"支持的文件類型是.rar,.zip,.7z",  16                 addRemoveLinks:true,  17             // maxFiles： //指的是上傳目錄下的最大文件數
                dictRemoveFile:"移除文件",  19                 dictUploadCanceled:"取消",  20                 dictCancelUploadConfirmation:"取消上傳該文件?",  21  dictDefaultMessage:  22                 "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖動文件</span>上傳\  23  <span class='smaller-80 gre'>(或者點擊上傳)</span> <br /> \  24                 <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",  25                 dictResponseError:"文件上傳失敗!",  26                 dictFileTooBig:"文件過大,上傳失敗!",  27                 //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>",  29                 init:function(){  30                     this.on("addedfile",function(file,data) {  31  fileArr.push(file.upload.uuid);  32                         //解決點擊時重復發送請求
                        $(".dz-remove").each(function(index) {  34                               if(!$(".dz-remove:eq(" + index + ")").attr("id")) {  35                                   $(".dz-remove:eq(" + index + ")").attr("id",fileArr[index]);  36  }  37  })  38                          
 })  40                     this.on("success",function(file,data){  41                         //var myDropzone = this;
                         $("#" + file.upload.uuid).click(function() {  43                                 var fileName = $(this).parent().find(".dz-filename").text();  44                                     if(window.confirm("確定要刪除嗎?")) {  45  $.ajax({  46                                              type:"POST",  47                                              url:"${pageContext.request.contextPath}/uploadController/delete.action",  48                                              data:{"fileName":fileName},  49                                              dataType:"json",  50                                              success:function(data){  51                                                     // this.removeFile(file);
 }  53  })  54  }  55                                 
 })  57                         
 });  59                     this.on("sending",function(file,data){  60                         
 })  62                     this.on("removedfile",function(file,data){  63                         
 })  65                     
                      this.on("canceled",function(file,data) {  67                          // alert("canceled");
                         this.removeFile(file);  69  });  70                     
                    this.on("error",function(file,data){  72                         
 });  74                     this.on("complete",function(file) {  75                             if(file.status == "canceled" || file.status == "error") {  76                                 var fileName = $("#" + file.upload.uuid).parent().find(".dz-filename").text();  77                                 setTimeout(function() {  78  $.ajax({  79                                          type:"POST",  80                                          url:"${pageContext.request.contextPath}/uploadController/delete.action",  81                                          data:{"fileName":fileName},  82                                          dataType:"json",  83                                          success:function(data){  84                                              if(data == "success") {  85                                                 // alert("刪除成功");
 }  87  },  88                                          error:function(ajax) {  89  alert(ajax.status);  90  }  91  })  92                                 },2000);  93  }  94  })  95                     
 }  97  });  98             } catch(e) {  99               alert('Dropzone.js does not support older browsers!'); 100  } 101             
        });

注意事項:

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")  2     public String upload(@RequestParam MultipartFile file,HttpSession session){  3         if(file == null) {  4             return "";  5  }  6         File newFile = null;  7         InputStream is = null;  8         BufferedOutputStream bos = null;  9         BufferedInputStream  bis = null; 10         try { 11             String originalFilename = file.getOriginalFilename(); 12             byte[] buffer = new byte[1024]; 13             String dirPath = session.getServletContext().getRealPath("/") + "upload"; 14             File dir  = new File(dirPath); 15             if(!dir.exists()) { 16  dir.getParentFile().mkdirs(); 17  } 18             if(originalFilename != null && originalFilename.trim().length() > 0) { 19                 newFile = new File(dirPath + "/" + originalFilename); 20  } 21             bos = new BufferedOutputStream(new FileOutputStream(newFile)); 22             is  = file.getInputStream(); 23           
            bis = new BufferedInputStream(is); 25             int count = 0; 26             while((count = bis.read(buffer)) != -1){ 27                 
                bos.write(buffer, 0,count); 29  } 30  bos.flush(); 31             
            String createTime = df.format(System.currentTimeMillis()); 33             FileBean fileBean = fileBeanService.findByName(originalFilename); 34             if(fileBean == null) { 35                 fileBean = new FileBean(); 36  fileBean.setName(originalFilename); 37  } 38  fileBean.setCreateTime(df.parse(createTime)); 39  fileBeanService.add(fileBean); 40             
        } catch (FileNotFoundException e1) { 42  e1.printStackTrace(); 43         } catch (IOException e) { 44  e.printStackTrace(); 45         } catch (ParseException e) { 46             // TODO Auto-generated catch block
 e.printStackTrace(); 48         }finally{ 49             if(bis != null){ 50                 try { 51  bis.close(); 52                 } catch (IOException e) { 53  e.printStackTrace(); 54  } 55  } 56             if(bos != null) { 57                 try { 58  bos.close(); 59                 } catch (IOException e) { 60  e.printStackTrace(); 61  } 62  } 63             
 } 65         return "redirect:/uploadController/dropzone.action"; 66     }

 2.關於移除和取消上傳文件

如果你用了數據庫,直接把對應的字段改成0就表示此文件不存在,可以不刪除如果你打算真的刪除時,執行delete方法前后盡量先讓線程睡眠一段時間,否則容易引起IOException,事實上文件上傳過程中點擊取消,實現的思路是先把文件上傳上來,然后再刪除,直接執行刪除也有可能引起IOException

ps:這也是3月初的時候用的插件,至今過了一個月了才抽出時間寫寫總結,在此記錄下來給自己一個參考