標籤:span func ctf 接受 cli 最大 over 上傳檔案 new
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/
上傳檔案外掛程式dropzone的執行個體