上传文件插件dropzone的实例

html:

class="field">   
"file" class="dropzone">     
class="dz-message needsclick">       Drop files here or click to upload.
      class="note needsclick">(Select the files you want to upload.)     
  

css:

.field{
  max-width:720px;
  margin:0 auto;
  margin-top:60px;
  font-size:20px;
  .dropzone{
    padding: 54px 54px;
    .dz-message{
      height:84px;
      font{
        line-height:28px;
      }
      span.note{
        height:28px;
        margin-top:28px;
        font-size:15px;
      }

    }
  }
}

js:

Dropzone.autoDiscover = false; 
var dropz = new Dropzone("#file", {

     url: "uploadFile", //上传文件的接口

   parallelUploads:10,//并行处理多少个文件上传
   uploadMultiple:true,//允许dropzone一次提交多个文件
   maxFiles: 10,//最大可上传的文件个数 
   maxFilesize: 10,//MB 
   acceptedFiles: ".csv", //可接受的文件类型
   success:function(file,data){ 
     //    console.log(this.getAcceptedFiles().length);//获取上传的文件总数 
     data=JSON.parse(data);
     if(data.code=='000'){
      //成功
     }else{
     }
   }, 
   dictMaxFilesExceeded:"文件数量过多", 
   dictDefaultMessage:"Drop files here or click to upload.", 
   dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb,当前文件大小为{{filesize}}Mb ", 
})

dropzone需要注意的一点就是:

  打开文件的那一刻,就已经开始上传了

官网地址:http://www.dropzonejs.com/

 

转载于:https://www.cnblogs.com/rachelch/p/7373626.html

你可能感兴趣的:(上传文件插件dropzone的实例)