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

Eiji Kitamura

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

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

Hãy xem mã mẫu về tính năng 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àn hình nền vào trình duyệt, 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 đã thả

Chrome 21 cho phép bạn thả một hoặc nhiều thư mục vào cửa sổ trình duyệt. Để xử lý các trường hợp này, bạn cần thay đổi cách xử lý các đối tượng được 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 sự 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 quy cách API FileSystem. 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 được thả là tệp hay 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á API FileSystem. Để biết thêm thông tin về tính 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 sắp trở thành tiêu chuẩn mở.