06: dorpzone上传下载

1.1 dropzone上传下载使用

　　参考博客：https://www.cnblogs.com/fu-yong/p/9053515.html 

　　1、使用dropzone需要引入文件

　　　　　　<link rel="stylesheet" href="/static/dropzone/dropzone.css">
　　　　　　<script src="/static/dropzone/jquery-1.12.4.js"></script>
　　　　　　<script src="/static/dropzone/dropzone.js"></script>

　　2、我们可以自己写css覆盖dropzone.css 的样式

<style>
    #filedropzone{
        width: 900px;
        height: 220px;
        margin-left: 200px;
        margin-top: 100px;
        border: 3px dashed green;
        border-radius: 2%;
        box-shadow: 3px 3px 5px #888888;

    }
</style>

　　3、dropzone中引入或不引入jquery的写法

　　　　1、如果没有引入jquery:

　　　　　　　　var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"});
　　　　2、如果引入了jquery:

　　　　　　　　$("#dropz").dropzone({url: "/upload"})

1.2 dropzone使用常用配置项

　　1、常用事件：

　　　　　　addedfile :    添加文件是发生
　　　　　　removefile :   手动从服务器删除文件时发生
　　　　　　success :     上传成功后发生
　　　　　　complete：   当文件上传成功或失败之后发生。
　　　　　　canceled：   当文件在上传时被取消的时候发生。
　　　　　　maxfilesreached：   当文件数量达到最大时发生。
　　　　　　maxfilesexceeded：   当文件数量超过限制时发生。
　　　　　　totaluploadprogress :   文件上传中的返回值，第一个参数为总上传进度(0到100)，第二个为总字节数，第三个为总上传字节数，利用这几个参数，可计算出上传速度，和剩余上传时间；

　　2、常用的配置项：

　　　　　　url : 必要参数，文件的上传地址；
　　　　　　maxFiles : 默认为null，可以指定为一个数值，限制最多文件数量。
　　　　　　maxFilesize : 限制文件的大小，单位是MB；
　　　　　　acceptedFiles : 允许上传的文件类型，文件扩展名以逗号隔开，格式见实例；
　　　　　　autoProcessQueue : 默认为true，即拖入文件立即自动上传；如果需要在上传之前有一些选择的操作，然后手动上传，可以把该属性设置为false，然后手动点击按钮上传；
　　　　　　paramName : 相当于<input>元素的name属性，默认为file。

　　3、提示文本：

　　　　　　dictDefaultMessage :     没有任何文件被添加时的提示文本；
　　　　　　dictFallbackMessage：   Fallback 情况下的提示文本。
　　　　　　dictInvalidInputType：   文件类型被拒绝时的提示文本。
　　　　　　dictFileTooBig：    文件大小过大时的提示文本。
　　　　　　dictCancelUpload：    取消上传链接的文本。
　　　　　　dictCancelUploadConfirmation：     取消上传确认信息的文本。
　　　　　　dictRemoveFile：     移除文件链接的文本。
　　　　　　dictMaxFilesExceeded：   超过最大文件数量的提示文本。

　　4、dropzone 基本事例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/dropzone/dropzone.css">
    <script src="/static/dropzone/jquery-1.12.4.js"></script>
    <script src="/static/dropzone/dropzone.js"></script>
</head>
<body>
    <p style="font-weight: bold">上传附件</p>
    <form id="filedropzone" method="post" action="" 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">最多可上传十个附件</p>
            </div>
        </div>
        <input type="button" id="qr" value="上传">
        <input type="button" id="cancel" value="取消">
    </form>

    <div id="upload-div" style="margin-top: 20px">

    </div>
    <script>
        //Dropzone Configuration
        Dropzone.autoDiscover = false;
        $(document).ready(function () {
            $("#filedropzone").dropzone({
                url: '/workflow/workorder/upfile/',
                maxFiles: 10,   // 总共可以上传文件最大个数
                maxFilesize: 200,  // 上传文件最大 Mb
                acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
                autoProcessQueue: false,
                paramName: "file",
                dictDefaultMessage: "拖入需要上传的文件",
                parallelUploads: 10,   // 点击上传，一次上次最大个数
                dictFileTooBig:"文件过大上传文件最大支持.",
                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) {
                        //文件上传成功之后的操作
{#                        console.log('filex upload done...', response);#}
                        upfile_sucess(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;
            }
        });

        function upfile_sucess(files, response) {
            response = JSON.parse(response);
            var up_filename = response.up_filename;
            var filepath = response.filepath;

            // 创建div
            var file_div = document.createElement('div');
            file_div.className = "form-group has-success has-feedback";
            // 创建input
            var input = document.createElement('input');
            input.className = "form-control up-file";
            input.setAttribute("value",up_filename);
            input.setAttribute("filepath",filepath);
            input.setAttribute('disabled','disabled');
            // 创建span
            var span = document.createElement('span');
            span.className = "glyphicon glyphicon-ok form-control-feedback";
            file_div.appendChild(input);
            file_div.appendChild(span);

            document.getElementById('upload-div').appendChild(file_div);

        }
    </script>
</body>
</html>
upload.html

1.3 dropzone结合django实现多文件上传下载 

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)

UPLOAD_ANNEX_PATH = os.path.join(BASE_DIR, "upload/")
settings.py
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^upload/', views.upload_file),
    url(r'^download/', views.download_file),
]
urls.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render,HttpResponse
from django.http.response import StreamingHttpResponse
import uuid,json
from updown_load.settings import UPLOAD_ANNEX_PATH


def upload_file(request):
    if request.method == 'POST':
        filelist = request.FILES.getlist('file')
        data = {}
        if filelist:
            filelist = request.FILES.getlist('file')
            for upfile in filelist:
                up_filename = upfile.name
                store_filename = str(uuid.uuid1())  + '.' + up_filename.split('.')[-1]
                filepath = UPLOAD_ANNEX_PATH + store_filename
                with open(filepath, 'wb') as f:
                    for item in upfile.chunks():
                        f.write(item)
                data = {'up_filename':up_filename,'filepath':filepath}
                print json.dumps(data)
        return HttpResponse(json.dumps(data) )
    return render(request, 'upload.html')


def download_file(request):
    file_path = request.GET.get('file_path')
    name = request.GET.get('up_filename')
    def file_iterator(file_path, chunk_size=512):
        with open(file_path, 'rb') as f:
            while True:
                c = f.read(chunk_size)
                if c:
                    yield c
                else:
                    break
    response = StreamingHttpResponse(file_iterator(file_path))
    response['Content-Type'] = 'application/octet-stream'
    response['Content-Disposition'] = 'attachment;filename="{0}"'.format(name.encode('utf-8').decode('ISO-8859-1'))
    return response
views.py
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/dropzone/dropzone.css">
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
    <script src="/static/dropzone/jquery-1.12.4.js"></script>
    <script src="/static/dropzone/dropzone.js"></script>
</head>
<body>
    <p style="font-weight: bold">上传附件</p>
    <form id="filedropzone" method="post" action="" 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">最多可上传十个附件</p>
            </div>
        </div>
        <input type="button" id="qr" value="上传">
        <input type="button" id="cancel" value="取消">
    </form>

    <div id="upload-div" style="margin-top: 20px">

    </div>

    <!-- 模拟下载 -->
    <div>
        <div class="timeline-item">
            <h3 class="timeline-header"><a>附件下载</a></h3>
                <h3 class="timeline-header">
                    <a href="/download/?file_path=C:\\Users\\tom\\Desktop\\updown_load\\upload/00ef26ae-bd4b-11e8-80a6-d481d7cf000f.jpg&up_filename=4.jpg" class="download-file">
                        附件1下载: </a>
                    <span> 4.jpg</span>
                </h3>
        </div>


    </div>

    <script>
        //Dropzone Configuration
        Dropzone.autoDiscover = false;
        $(document).ready(function () {
            $("#filedropzone").dropzone({
                url: '/upload/',
                maxFiles: 10,   // 总共可以上传文件最大个数
                maxFilesize: 200,  // 上传文件最大 Mb
                acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
                autoProcessQueue: false,
                paramName: "file",
                dictDefaultMessage: "拖入需要上传的文件",
                parallelUploads: 10,   // 点击上传，一次上次最大个数
                dictFileTooBig:"文件过大上传文件最大支持.",
                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) {
                        //文件上传成功之后的操作
{#                        console.log('filex upload done...', response);#}
                        upfile_sucess(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;
            }
        });

        function upfile_sucess(files, response) {
            response = JSON.parse(response);
            var up_filename = response.up_filename;
            var filepath = response.filepath;

            // 创建div
            var file_div = document.createElement('div');
            file_div.className = "form-group has-success has-feedback";
            // 创建input
            var input = document.createElement('input');
            input.className = "form-control up-file";
            input.setAttribute("value",up_filename);
            input.setAttribute("filepath",filepath);
            input.setAttribute('disabled','disabled');
            // 创建span
            var span = document.createElement('span');
            span.className = "glyphicon glyphicon-ok form-control-feedback";
            file_div.appendChild(input);
            file_div.appendChild(span);

            document.getElementById('upload-div').appendChild(file_div);

        }
    </script>
</body>
</html>
upload.html

　　　　

 

posted @ 2018-09-21 11:23  不做大哥好多年  阅读(338)  评论(0)  编辑  收藏  举报