dropzone 模拟表单上传文件

DropZone 文件上传,dropzone模拟表单上传文件
正确引入DropZone js 文件
<script src="https://cdn.bootcss.com/dropzone/5.2.0/min/dropzone.min.js"></script>
<script>window.Dropzone||document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.2.0/min/dropzone.min.js"><\/script>')</script>
可建立form表单
<form id="dropz" action="/upload.php" enctype="multipart/form-data"><input type="file" name="file"></form>
可直接div用<div id="dropz"></div>
没有jquery时
var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"});
有jquery时
$("#dropz").dropzone({url: "/upload"})
DropZone配置项
url : 必要参数，文件的上传地址；
maxFiles : 默认为null，可以指定为一个数值，限制最多文件数量。
maxFilesize : 限制文件的大小，单位是MB；
acceptedFiles : 允许上传的文件类型，文件扩展名以逗号隔开，格式见实例；
autoProcessQueue : 默认为true，即拖入文件立即自动上传；如果需要在上传之前有操作，手动上传，可把该属性设为false后手动上传
paramName : 相当于<input>元素的name属性，默认为file
DropZone提示文本
dictDefaultMessage : 没有任何文件被添加时的提示文本；
dictFallbackMessage：Fallback 情况下的提示文本。
dictInvalidInputType：文件类型被拒绝时的提示文本。
dictFileTooBig：文件大小过大时的提示文本。
dictCancelUpload：取消上传链接的文本。
dictCancelUploadConfirmation：取消上传确认信息的文本。
dictRemoveFile：移除文件链接的文本。
dictMaxFilesExceeded：超过最大文件数量的提示文本。
DropZone添加监听事件
$("#dropz").dropzone({init: function() {    this.on("addedfile", function(file) {     });}});
没有jquery时
dropz.on("addedfile", function(file) {  });
DropZone常用事件
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,remain, speed, byteKb = byte/1024, bytesKb = bytes/1024, byteMb = byte/1024/1024, 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;
}