上传文件插件dropzone的实例

html:

<div class="field">
　　<div id="file" class="dropzone">
　　　　<div class="dz-message needsclick">
　　　　　　<font><font>Drop files here or click to upload.</font></font><br>
　　　　　　<span class="note needsclick">(Select the files you want to upload.)</span>
　　　　</div>
　　</div>
</div>

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