Bạn hiện có thể kéo và thả một thư mục vào Chrome

Eiji Kitamura

Twitter GitHub Sự cố Cột hai cột

Khi ứng dụng web phát triển, bạn có thể thấy thật hữu ích khi cho phép người dùng kéo và thả tệp từ máy tính vào trình duyệt để chỉnh sửa, tải lên, chia sẻ, v.v. Nhưng rất tiếc, chúng tôi không thể kéo và thả thư mục vào trang web. May mắn thay, kể từ Chrome 21, sự cố này sẽ được giải quyết (đã có trong kênh nhà phát triển Chrome).

Chuyển nhiều tệp bằng thao tác kéo và thả

Hãy xem mã mẫu của thao tác kéo và thả hiện có.

<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
    }
};

Trong ví dụ này, bạn thực sự có thể kéo và thả một hoặc nhiều tệp từ máy tính vào trình duyệt của mình, nhưng khi bạn cố gắng truyền một thư mục, hãy lưu ý rằng thư mục đó sẽ bị từ chối hoặc được coi là đối tượng File dẫn đến lỗi.

Cách xử lý thư mục bị thả

Chrome 21 cho phép bạn thả một thư mục hoặc nhiều thư mục vào cửa sổ trình duyệt. Để xử lý các đối tượng này, bạn cần thay đổi cách xử lý các đối tượng bị thả.

<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
    }
    }
};

Lưu ý rằng điểm khác biệt lớn ở đây là bạn có thể coi đối tượng đã thả là Entry (FileEntry hoặc DirectoryEntry) bằng cách sử dụng hàm mới có tên là getAsEntry (webkitGetAsEntry). Sau khi có quyền truy cập vào đối tượng Entry, bạn có thể sử dụng các phương thức xử lý tệp tiêu chuẩn được giới thiệu trong thông số kỹ thuật của FileSystem API. Ví dụ: ví dụ này cho thấy cách bạn có thể phát hiện xem một đối tượng đã thả là một tệp hay một thư mục bằng cách kiểm tra trường .isFile (hoặc .isDirectory).

Để biết thêm thông tin về API FileSystem, hãy đọc bài viết Khám phá các API FileSystem, về khả năng kéo và thả mới, hãy đọc tài liệu này. Tất nhiên, các tính năng này là các tiêu chuẩn mở hoặc đang chờ để sớm trở thành tiêu chuẩn.