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

February 19, 2014 / 程式設計指南

dropzone.js 是一個開源的 JavaScript 庫，提供 AJAX 異步上傳功能。

安裝

下載下傳

dropzone.js

檔案并添加到頁面中即可。Dropzone 不依賴 jQuery 架構。

啟用

可以建立一個

div

元素，然後通過如下 JavaScript 代碼啟用 dropzone（如果你使用 jQuery）：

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

如果你沒有使用 jQuery 架構，也可以這樣來初始化：

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

其中

url

是必須的值，指明檔案上傳送出到哪個頁面。其他的值都是可選的，如果使用預設值的話可以省略。

接收檔案

Dropzone 并不含任何伺服器端的支援和實作，利用 Dropzone 上傳檔案和利用下面基本的 HTML 表單對于伺服器來說是一樣的：

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

配置 Dropzone

此插件的特色就在于非常靈活，提供了許多可選項、事件等。下面分類介紹常用的配置項。

功能選項

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 的預設行為，那麼你應該通過添加事件監聽器的辦法對事件做出響應，而非重寫預設事件函數。

重寫預設事件函數的例子如下：

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

如果你重寫預設事件函數，該事件發生時插件預設采取的動作将被覆寫。大多數情況下你僅僅想在事件發生時添加自己的行為，那麼應該使用

on

方法。

jQuery 版本：

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

外觀

Dropzone 下載下傳之後沒有自帶任何 CSS 樣式（人家隻有一個 js 檔案嘛）。我覺得官網提供的 Demo 的外觀設計就非常不錯，可以供大家參考。

熬夜不易,點選請老王喝杯烈酒！！！！！！！

DropZone