現在可以將資料夾拖曳到 Chrome 中了

Eiji Kitamura

Twitter GitHub Glitch Mastodon

隨著網頁應用程式不斷進化，讓使用者能從桌面拖曳檔案到瀏覽器中編輯、上傳、分享等等。但很抱歉，我們無法將資料夾拖曳到網頁上。幸好，從 Chrome 21 版開始，這項問題將獲得解決 (已在 Chrome 開發人員版本中提供)。

使用拖曳功能傳送多個檔案

我們來看看現有拖曳功能的程式碼範例。

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

在這個範例中，您可以實際將檔案從電腦拖曳到瀏覽器，但嘗試傳送資料夾時，請注意系統會拒絕或視為 File 物件，導致執行失敗。

如何處理已捨棄的資料夾

Chrome 21 版本可讓您將資料夾或多個資料夾拖曳到瀏覽器視窗中。如要處理這些物件，您必須變更捨棄物件的方式。

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

請注意，最大的差別在於您可以使用名為 getAsEntry (webkitGetAsEntry) 的新函式，將捨棄的物件視為 Entry (FileEntry 或 DirectoryEntry)。取得 Entry 物件的存取權後，可以使用 FileSystem API 規格中引入的標準檔案處理方法。例如，這個範例說明如何檢查 .isFile (或 .isDirectory) 欄位，藉此偵測捨棄的物件是檔案或目錄。

如要進一步瞭解 FileSystem API，請參閱「探索檔案系統 API」一文，瞭解新的拖曳功能，請參閱這份文件。不過，這些功能屬於開放標準，或是即將推出。