DropZone(文件上传插件)

1. html文件

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

  1. 可以建立一个form表单: <form id="dropz" action="/upload.php" enctype="multipart/form-data"> <input type="file" name="file"> </form>
  2. 也可以不用表单的形式,直接用一个div <div id="dropz"></div>

2.引入css文件

引入dropzone.min.css之后会有更漂亮的外观;

3.js文件

必须配置js才能上传  1.如果没有引入jquery: 

var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"}); 

2.如果引入了jquery:

$("#dropz").dropzone({url: "/upload"})
常用的配置项:
  • 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;
}
#urls.py

from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^test/', views.dropzoneTest),
]





#views.py

from django.shortcuts import render

def dropzoneTest(request):
    if request.is_ajax():
        file = request.FILES.get('file')
        with open('file.jpg','wb') as f:
            for line in file:
                f.write(line)
    return render(request,'dropzoneTest.html')


#dropzoneDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'dropzone.css' %}">
    <script src="{% static 'jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'dropzone.js' %}"></script>
</head>
<body>
<p>请上传身份照正反面照片</p>
        <form id="filedropzone" method="post" action="{{ request.path }}" class="dropzone dz-clickable" >{% csrf_token %}
            <div class="dz-default dz-message">
                <div class="dz-icon icon-wrap icon-circle icon-wrap-md">
                    <i class="fa fa-cloud-upload fa-3x"></i>
                </div>
                <div>
                    <p class="dz-text">把证件信息拖放到这里</p>
                    <p class="text-muted">最多可上传2张照片</p>
                </div>
            </div>
        </form>

<!--------------------------------------------------------------->
<script>
$(document).ready(function () {
    $("#filedropzone").dropzone({
        url: "{{ request.path }}",
        maxFiles: 5,
        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;
    }
}
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go语言制作的zip压缩程序

package main import ( "archive/zip" "bytes" "fmt" "io/ioutil" "os" "path/f...

29950
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

243100
来自专栏JasonhavenDai

使用EndNote管理文献1.EndNote2.下载安装3.登录客户端4.同步EndNote Web5.关联Micrasoft Word

1.EndNote 官网 知乎 2.下载安装 链接 3.登录客户端 选项->首选项->同步(Sync) ? 具体的EndNote使用方法,网上有很多,...

348100
来自专栏Java 技术分享

Ajax 学习总结

38670
来自专栏java架构师

资源文件的动态加载

页面加载 首先,浏览器发起直接对目标html的请求,然后分析其中用到的资源并下载,浏览器有自己的规则来判断什么样的资源可以被并行下载,什么样的不可以,浏览器对加...

39190
来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

12210
来自专栏葡萄城控件技术团队

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

12420
来自专栏达摩兵的技术空间

mint-ui loadmore 采坑指南

loadmore的部分主要是mint-ui用来解决上拉以及下拉的部分,用来做加载更多数据或者刷新的部分。

26230
来自专栏卡少编程之旅

fiddler抓包工具(windows)

874150
来自专栏Python数据科学

想爬虫?登录了再说

摘要: 在进行爬虫时,除了常见的不用登录就能爬取的网站,还有一类需要先登录的网站。比如豆瓣、知乎,以及上一篇文章中的桔子网。这一类网站又可以分为:只需输入帐号密...

17340

扫码关注云+社区

领取腾讯云代金券