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

Eiji Kitamura

隨著網頁應用程式不斷演進，您可能發現讓使用者從電腦拖曳檔案至瀏覽器，以便編輯、上傳、分享等操作相當方便。但很遺憾，我們無法將資料夾拖曳至網頁。幸運的是，從 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，請參閱「探索 FileSystem API」；如要瞭解新的拖曳功能，請參閱這份文件。當然，這些功能都是開放標準，或即將成為開放標準。