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: 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:,//并行处理多少个文件上传

　　　uploadMultiple:true,//允许dropzone一次提交多个文件

　　　maxFiles: ,//最大可上传的文件个数

　　　maxFilesize: ,//MB

　　　acceptedFiles: ".csv", //可接受的文件类型

　　　success:function(file,data){

　　　　　//    console.log(this.getAcceptedFiles().length);//获取上传的文件总数

　　　　　data=JSON.parse(data);

　　　　　if(data.code==''){

　　　　　　//成功

　　　　　}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:,//并行处理多少个文件上传

　　uploadMultiple:true,//允许dropzone一次提交多个文件

　　maxFiles: ,//最大可上传的文件个数

　　maxFilesize: ,//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==''){

　　　　}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 );

};

巴特西

dropzone手动上传

最新文章

热门文章