JavaScript 文件拖拽上傳插件 dropzone.js 介紹

時間 2019-12-04

標籤 javascript 文件上傳插件 dropzone.js dropzone 介紹欄目 JavaScript 简体版

原文原文鏈接

安裝

下載dropzone.js文件並添加到頁面中便可。Dropzone 不依賴 jQuery 框架。javascript

啓用

能夠新建一個div元素，而後經過以下 JavaScript 代碼啓用 dropzone（若是你使用 jQuery）：php

<div id="dropz"></div>
<script>
    $("#dropz").dropzone({
        url: "handle-upload.php",
        maxFiles: 10,
        maxFilesize: 512,
        acceptedFiles: ".js,.obj,.dae"
    });
</script>

若是你沒有使用 jQuery 框架，也能夠這樣來初始化：css

<div id="dropz"></div>
<script>
    var dropz = new Dropzone("#dropz", {
        url: "handle-upload.php",
        maxFiles: 10,
        maxFilesize: 512,
        acceptedFiles: ".js,.obj,.dae"
    });
</script>

其中url是必須的值，指明文件上傳提交到哪一個頁面。其餘的值都是可選的，若是使用默認值的話能夠省略。html

接收文件

Dropzone 並不含任何服務器端的支持和實現，利用 Dropzone 上傳文件和利用下面基本的 HTML 表單對於服務器來講是同樣的：java

<form action="handle-upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
</form>

配置 Dropzone

此插件的特點就在於很是靈活，提供了許多可選項、事件等。下面分類介紹經常使用的配置項。git

功能選項

url：最重要的參數，指明瞭文件提交到哪一個頁面。
method：默認爲post，若是須要，能夠改成put。
paramName：至關於<input>元素的name屬性，默認爲file。
maxFilesize：最大文件大小，單位是 MB。
maxFiles：默認爲null，能夠指定爲一個數值，限制最多文件數量。
addRemoveLinks：默認false。若是設爲true，則會給文件添加一個刪除連接。
acceptedFiles：指明容許上傳的文件類型，格式是逗號分隔的 MIME type 或者擴展名。例如：image/*,application/pdf,.psd,.obj
uploadMultiple：指明是否容許 Dropzone 一次提交多個文件。默認爲false。若是設爲true，則至關於 HTML 表單添加multiple屬性。
headers：若是設定，則會做爲額外的 header 信息發送到服務器。例如：{"custom-header": "value"}
init：一個函數，在 Dropzone 初始化的時候調用，能夠用來添加本身的事件監聽器。
forceFallback：Fallback 是一種機制，當瀏覽器不支持此插件時，提供一個備選方案。默認爲false。若是設爲true，則強制 fallback。
fallback：一個函數，若是瀏覽器不支持此插件則調用。

翻譯選項

dictDefaultMessage：沒有任何文件被添加的時候的提示文本。
dictFallbackMessage：Fallback 狀況下的提示文本。
dictInvalidInputType：文件類型被拒絕時的提示文本。
dictFileTooBig：文件大小過大時的提示文本。
dictCancelUpload：取消上傳連接的文本。
dictCancelUploadConfirmation：取消上傳確認信息的文本。
dictRemoveFile：移除文件連接的文本。
dictMaxFilesExceeded：超過最大文件數量的提示文本。

添加事件監聽

若是你但願在一個事件發生時採起一些額外的操做，而不干擾 Dropzone 的默認行爲，那麼你應該經過添加事件監聽器的辦法對事件作出響應，而非重寫默認事件函數。github

重寫默認事件函數的例子以下：瀏覽器

$("#dropz").dropzone({
    addedfile: function() {
        // actions...
    }
});

若是你重寫默認事件函數，該事件發生時插件默認採起的動做將被覆蓋。大多數狀況下你僅僅想在事件發生時添加本身的行爲，那麼應該使用on方法。服務器

jQuery 版本：app

$("#dropz").dropzone({
    init: function() {
        this.on("addedfile", function(file) {
            // actions...
        });
    }
});

非 jQuery 版本：

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

經常使用事件

如下事件接收 file 爲第一個參數

addedfile：添加了一個文件時發生。
removedfile：一個文件被移除時發生。你能夠監聽這個事件並手動從服務器刪除這個文件。
uploadprogress：上傳時按必定間隔發生這個事件。第二個參數爲一個整數，表示進度，從 0 到 100。第三個參數是一個整數，表示發送到服務器的字節數。當一個上傳結束時，Dropzone 保證會把進度設爲 100。注意：這個函數可能被以同一個進度調用屢次。
success：文件成功上傳以後發生，第二個參數爲服務器響應。
complete：當文件上傳成功或失敗以後發生。
canceled：當文件在上傳時被取消的時候發生。
maxfilesreached：當文件數量達到最大時發生。
maxfilesexceeded：當文件數量超過限制時發生。

如下事件接收一個 file list 做爲第一個參數（僅當uploadMultiple被設爲true時纔會發生）

successmultiple
completemultiple
cancelmultiple

特殊事件

totaluploadprogress：第一個參數爲總上傳進度，第二個參數爲總字節數，第三個參數爲總上傳字節數。

例子

這裏我使用上面的選項、事件等寫了一個例子，供參考：

<div class="dropz"></div>
<script>
    $(".dropz").dropzone({
        url: "handle-upload.php",
        addRemoveLinks: true,
        dictRemoveLinks: "x",
        dictCancelUpload: "x",
        maxFiles: 10,
        maxFilesize: 5,
        acceptedFiles: ".js",
        init: function() {
            this.on("success", function(file) {
                console.log("File " + file.name + "uploaded");
            });
            this.on("removedfile", function(file) {
                console.log("File " + file.name + "removed");
            });
        }
    });
</script>