dropzone手動上傳

標籤：line   length   擷取   www   20px   多個   att   parallel   als   

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 ", 
})

官網地址: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 );
};

 

dropzone手動上傳