dropzone.js是一个可预览的上传文件工具，不依赖任何框架（如jQuery），且具有可定制化。实现文件拖拽上传，提供AJAX异步上传功能。
1. html文件
dropzone的原理是模拟表单来上传文件，html中的元素有多重形式。
- 可以建立一个form表单：
<form id="dropz" action="/upload.php" enctype="multipart/form-data">
<input type="file" name="file">
</form>- 也可以不用表单的形式，直接用一个div，
<div id="dropz"></div>
2.引入css文件
引入dropzone.min.css之后会有更漂亮的外观；
3.js文件
必须配置js才能上传
1.如果没有引入jquery: var myDropzone = new Dropzone("div#mydropzone", {url: "upload.php"});
2.如果引入了jquery:$("#dropz").dropzone({url: "upload.php"})
常用的配置项：
- url : 必要参数，文件的上传地址；
- maxFiles : 默认为null，可以指定为一个数值，限制最多文件数量。
- maxFilesize : 限制文件的大小，单位是MB；
- acceptedFiles : 允许上传的文件类型，文件扩展名以逗号隔开，格式见实例；
- autoProcessQueue : 默认为true，即拖入文件立即自动上传；如果需要在上传之前有一些选择的操作，然后手动上传，可以把该属性设置为false，然后手动点击按钮上传；
- paramName : 相当于
<input>元素的name属性，默认为file。
提示文本：
- dictDefaultMessage : 没有任何文件被添加时的提示文本；
- dictFallbackMessage：Fallback 情况下的提示文本。
- dictInvalidInputType：文件类型被拒绝时的提示文本。
- dictFileTooBig：文件大小过大时的提示文本。
- dictCancelUpload：取消上传链接的文本。
- dictCancelUploadConfirmation：取消上传确认信息的文本。
- dictRemoveFile：移除文件链接的文本。
- dictMaxFilesExceeded：超过最大文件数量的提示文本。
添加监听事件：
$("#dropz").dropzone({
init: function() {
this.on("addedfile", function(file) {
// actions...
});
}
});没有添加jquery时：
dropz.on("addedfile", function(file) {
// actions...
});常用事件：
- addedfile : 添加文件是发生
- removefile : 手动从服务器删除文件时发生
- success : 上传成功后发生
- complete：当文件上传成功或失败之后发生。
- canceled：当文件在上传时被取消的时候发生。
- maxfilesreached：当文件数量达到最大时发生。
- maxfilesexceeded：当文件数量超过限制时发生。
- totaluploadprogress : 文件上传中的返回值，第一个参数为总上传进度(0到100)，第二个为总字节数，第三个为总上传字节数，利用这几个参数，可计算出上传速度，和剩余上传时间；
$("#dropz").dropzone({
url: "/files/uploading",
maxFiles: ,
maxFilesize: ,
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上传的文件",
init: function () {
var myDropzone = this, submitButton = document.querySelector("#qr"),
cancelButton = document.querySelector("#cancel");
myDropzone.on('addedfile', function (file) {
//添加上传文件的过程，可再次弹出弹框，添加上传文件的信息
});
myDropzone.on('sending', function (data, xhr, formData) {
//向后台发送该文件的参数
formData.append('watermark', jQuery('#info').val());
});
myDropzone.on('success', function (files, response) {
//文件上传成功之后的操作
});
myDropzone.on('error', function (files, response) {
//文件上传失败后的操作
});
myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
//progress为进度百分比
$("#pro").text("上传进度：" + parseInt(progress) + "%");
//计算上传速度和剩余时间
var mm = ;
var byte = ;
var tt = setInterval(function () {
mm++;
var byte2 = bytes;
var remain;
var speed;
var byteKb = byte/;
var bytesKb = bytes/;
var byteMb = byte//;
var bytesMb = bytes//;
if(byteKb <= ){
speed = (parseFloat(byte2 - byte)/()/mm).toFixed() + " KB/s";
remain = (byteKb - bytesKb)/parseFloat(speed);
}else{
speed = (parseFloat(byte2 - byte)/(*)/mm).toFixed() + " MB/s";
remain = (byteMb - bytesMb)/parseFloat(speed);
}
$("#dropz #speed").text("上传速率：" + speed);
$("#dropz #time").text("剩余时间"+arrive_timer_format(parseInt(remain)));
if(bytes >= byte){
clearInterval(tt);
if(byteKb <= ){
$("#dropz #speed").text("上传速率：0 KB/s");
}else{
$("#dropz #speed").text("上传速率：0 MB/s");
}
$("#dropz #time").text("剩余时间：0:00:00");
}
},);
});
submitButton.addEventListener('click', function () {
//点击上传文件
myDropzone.processQueue();
});
cancelButton.addEventListener('click', function () {
//取消上传
myDropzone.removeAllFiles();
});
}
});
//剩余时间格式转换：
function arrive_timer_format(s) {
var t;
if(s > -){
var hour = Math.floor(s/);
var min = Math.floor(s/) % ;
var sec = s % ;
var day = parseInt(hour / );
if (day > ) {
hour = hour - * day;
t = day + "day " + hour + ":";
}
else t = hour + ":";
if(min < ){t += "";}
t += min + ":";
if(sec < ){t += "";}
t += sec;
}
return t;
}
完整示例