【第22期】观点:IT 行业加班,到底有没有价值?

文件上传工具--dropzone.js

原创 2017年01月03日 10:50:51

前段时间在项目中要用一个文件上传工具,于是研究了一下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;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

JavaScript 文件拖拽上传插件 dropzone.js 介绍

dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。 安装 下载dropzone.js文件并添加到页面中即可。Dropzone 不依赖 jQuer...

JavaScript 文件拖拽上传插件 dropzone.js 介绍

JavaScript 文件拖拽上传插件 dropzone.js 介绍 [url]https://www.renfei.org/blog/dropzone-js-introduction.html[/url] ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传 [url]htt...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

springmvc带文件上传的form表单提交,用 jquery的ajaxfileupload或使用dropzone上传图文详解

方法一和方法二处理思路一致,分两步提交:第一步 提交图片到文件服务器,并返回图片所在文件服务器的地址如:xxx/aaa.jpg,把文件地址(xxx/aaa.jpg)放到页面隐藏域。.第二步 提交表单 ...

php工具类之【文件上传类】

class Upload{ // 上传文件的最大值 public $maxSize = -1; // 允许上传的文件后缀 // 留空不作后缀检查 public $allowExts = array(); // 使用对上传图片进行缩略图处...

Dropzone.js实现文件拖拽上传

Dropzone.js实现文件拖拽上传
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)