文件上传工具--dropzone.js

前段时间在项目中要用一个文件上传工具，于是研究了一下dropzone.js。dropzone.js是一个可预览的上传文件工具，不依赖任何框架（如jQuery），且具有可定制化。实现文件拖拽上传，提供AJAX异步上传功能。

1. html文件

dropzone的原理是模拟表单来上传文件，html中的元素有多重形式。

1. 可以建立一个form表单：

<form id="dropz" action="/upload.php" enctype="multipart/form-data">    <input type="file" name="file"></form>

1. 也可以不用表单的形式，直接用一个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: 1,    maxFilesize: 1024,    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 = 0;            var byte = 0;            var tt = setInterval(function () {                mm++;                var byte2 = bytes;                var remain;                var speed;                var byteKb = byte/1024;                var bytesKb = bytes/1024;                var byteMb = byte/1024/1024;                var bytesMb = bytes/1024/1024;                if(byteKb <= 1024){                    speed = (parseFloat(byte2 - byte)/(1024)/mm).toFixed(2) + " KB/s";                    remain = (byteKb - bytesKb)/parseFloat(speed);                }else{                    speed = (parseFloat(byte2 - byte)/(1024*1024)/mm).toFixed(2) + " 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 <= 1024){                        $("#dropz #speed").text("上传速率：0 KB/s");                    }else{                        $("#dropz #speed").text("上传速率：0 MB/s");                    }                    $("#dropz #time").text("剩余时间：0:00:00");                }            },1000);        });        submitButton.addEventListener('click', function () {            //点击上传文件            myDropzone.processQueue();        });        cancelButton.addEventListener('click', function () {            //取消上传            myDropzone.removeAllFiles();        });    }});//剩余时间格式转换：function arrive_timer_format(s) {    var t;    if(s > -1){        var hour = Math.floor(s/3600);        var min = Math.floor(s/60) % 60;        var sec = s % 60;        var day = parseInt(hour / 24);        if (day > 0) {            hour = hour - 24 * day;            t = day + "day " + hour + ":";        }        else t = hour + ":";        if(min < 10){t += "0";}        t += min + ":";        if(sec < 10){t += "0";}        t += sec;    }    return t;}