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-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 ", })
官网地址:http://www.dropzonejs.com/
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> <button class="button" disabled="true">上传</button>
js:
Dropzone.autoDiscover = false; var dropz = new Dropzone("#file", { url: "uploadFile", // addRemoveLinks: true, parallelUploads:10,//并行处理多少个文件上传 uploadMultiple:true,//允许dropzone一次提交多个文件 maxFiles: 10,//最大可上传的文件个数 maxFilesize: 10,//MB acceptedFiles: ".csv", autoProcessQueue: false,//阻止自动上传 success:function(file,data){ // console.log(this.getAcceptedFiles().length);//获取上传的文件总数 console.log(JSON.parse(data)); data=JSON.parse(data); if(data.code=='000'){ }else{ } }, dictMaxFilesExceeded:"文件数量过多", dictDefaultMessage:"Drop files here or click to upload.", dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb,当前文件大小为{{filesize}}Mb ", }).on('addedfile',function(file){ $( '.button' ).removeAttr('disabled'); $( '.button' ).bind( 'click', uploadHandle ); }); uploadHandle = function() { dropz.processQueue();//开启文件上传 $( '.button' ).unbind( 'click', uploadHandle ); };