Dropzone Manual Upload

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

}
}
}

ls|

Dropzone.autodiscover = false;
var Dropz = new Dropzone ("#file", {

URL: "UploadFile",//interface for uploading files

paralleluploads:10,// How many file uploads are processed in parallel
uploadmultiple:true,// allow Dropzone to submit multiple files at once
maxfiles:10,//maximum number of files that can be uploaded
Maxfilesize:10,//mb
Acceptedfiles: ". csv",//acceptable file types
Success:function (File,data) {
Console.log (This.getacceptedfiles (). length);//Gets the total number of uploaded files
Data=json.parse (data);
if (data.code== ' 000 ') {
Success
}else{
}
},
Dictmaxfilesexceeded: "Too many Files",
Dictdefaultmessage: "Drop files here or click to upload.",
Dictfiletoobig: "The maximum file size that can be added is {{MAXFILESIZE}}MB, the current file size is {{FILESIZE}}MB",
})

Website address:http://www.dropzonejs.com/

One thing Dropzone should be aware of is:

The moment the file is opened, it has already started uploading.

In this case, there will be a problem, once we need to upload a number of files, and in our selection of files when the file is missing, then the previous file has been uploaded, and now add the missing file again, will call the interface again.

So maybe we need a manual upload , that is: When the file is opened, prevent automatic upload, when all the files have been added successfully, then manually press the upload button.

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" > Upload </button>

Js:

Dropzone.autodiscover = false;
var Dropz = new Dropzone ("#file", {
URL: "UploadFile",
Addremovelinks:true,
paralleluploads:10,//How many file uploads are processed in parallel
uploadmultiple:true,//allow Dropzone to submit multiple files at once
maxfiles:10,//maximum number of files that can be uploaded
Maxfilesize:10,//mb
Acceptedfiles: ". csv",
　　 autoprocessqueue:false,//block automatic uploads
Success:function (File,data) {
Console.log (This.getacceptedfiles (). length);//Gets the total number of uploaded files
Console.log (Json.parse (data));
Data=json.parse (data);
if (data.code== ' 000 ') {
}else{
}
},
Dictmaxfilesexceeded: "Too many Files",
Dictdefaultmessage: "Drop files here or click to upload.",
Dictfiletoobig: "The maximum file size that can be added is {{MAXFILESIZE}}MB, the current file size is {{FILESIZE}}MB",

}). On (' Addedfile ', function (file) {
$ ('. Button '). Removeattr (' disabled ');
$ ('. Button '). Bind (' click ', Uploadhandle);
});
Uploadhandle = function () {
Dropz.processqueue ();//Open File Upload
$ ('. Button '). Unbind (' click ', Uploadhandle);
};

Dropzone Manual Upload