DropZone（文件上傳插件）

時間 2019-11-06

標籤 dropzone 文件上傳插件简体版

原文原文鏈接

1. html文件

dropzone的原理是模擬表單來上傳文件，html中的元素有多重形式。php

能夠創建一個form表單：

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

也能夠不用表單的形式，直接用一個div
```
<div id="dropz"></div>
```

2.引入css文件

引入dropzone.min.css以後會有更漂亮的外觀；css

而後能夠本身添加些外觀樣式覆蓋它，如：html

<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.js文件

必須配置js才能上傳
1.若是沒有引入jquery: python

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

2.若是引入了jquery: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時：ajax

dropz.on("addedfile", function(file) {
    // actions...
});

經常使用事件：

addedfile : 添加文件是發生
removefile : 手動從服務器刪除文件時發生
success : 上傳成功後發生
complete：當文件上傳成功或失敗以後發生。
canceled：當文件在上傳時被取消的時候發生。
maxfilesreached：當文件數量達到最大時發生。
maxfilesexceeded：當文件數量超過限制時發生。
totaluploadprogress : 文件上傳中的返回值，第一個參數爲總上傳進度(0到100)，第二個爲總字節數，第三個爲總上傳字節數，利用這幾個參數，可計算出上傳速度，和剩餘上傳時間；

html文件demodjango

    <link rel="stylesheet" href="/static/plugins/dropzone/dropzone.css">

<div id="upload_div">

<p>請上傳您的代碼（如包含文件夾須要打包後再上傳）</p>
        <form id="filedropzone" method="post" action="/upload" class="dropzone dz-clickable" >
            <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>

</div>

<script src="/static/plugins/dropzone/dropzone.js"></script>

<script>
    $(document).ready(function () {
         Dropzone.options.filedropzone = {
          url:"{{ request.path }}",
          paramName: "file", // The name that will be used to transfer the file
          maxFilesize: 1, // MB,
          addRemoveLinks:true,
          maxFiles:5,
          uploadMultiple:true,
          accept: function(file, done) {
            if (! file.name.endsWith(".zip") ) {
              alert("只能上傳.zip格式的壓縮包")
                done("文件爲上傳")
                myDropzone.removeFile(file);
            }
            else { done(); }
          }
        };


      Dropzone.autoDiscover = false;
      myDropzone = new Dropzone("#filedropzone");
      myDropzone.on("addedfile", function(file) {
        /* Maybe display some more file information on your page */
      });

      myDropzone.on("success", function(file,response) {
          /* Maybe display some more file information on your page */
          console.log('filex upload done...', response);
      } )

    })

</script>

完整示例：

$("#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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。