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