Tích hợp input[type=file] với API Filesystem

Giả sử bạn có một ứng dụng chỉnh sửa ảnh và muốn người dùng có thể kéo hàng trăm ảnh và sao chép chúng vào ứng dụng của bạn. Vậy bạn sẽ làm gì?

Trong một bài đăng gần đây, Eiji Kitamura đã nêu bật một tính năng mới tinh tế nhưng mạnh mẽ trong các API kéo và thả; khả năng kéo các thư mục và truy xuất các thư mục đó dưới dạng đối tượng FileEntry và DirectoryEntry của API Hệ thống tệp HTML5 (thực hiện bằng cách truy cập vào một phương thức mới trên DataTransferItem, .webkitGetAsEntry()).

Điểm thú vị đáng kể về tiện ích .webkitGetAsEntry() là cách tiện ích này giúp nhập tệp và toàn bộ thư mục một cách thanh lịch. Sau khi có FileEntry hoặc DirectoryEntry từ một sự kiện thả, bạn chỉ cần sử dụng copyTo() của API Hệ thống tệp để nhập tệp đó vào ứng dụng.

Ví dụ về cách sao chép nhiều thư mục đã thả vào hệ thống tệp:

var fs = null; // Cache filesystem for later.

// Not shown: setup drag and drop event listeners.
function onDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    var items = e.dataTransfer.items;

    for (var i = 0, item; item = items[i]; ++i) {
    var entry = item.webkitGetAsEntry();

    // Folder? Copy the DirectoryEntry over to our local filesystem.
    if (entry.isDirectory) {
        entry.copyTo(fs.root, null, function(copiedEntry) {
        // ...
        }, onError);
    }
    }
}

window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
    fs = fileSystem;
}, function(e) {
    console.log('Error', e);
});

Rất tốt! Xin nhắc lại, sự đơn giản đến từ việc tích hợp DnD với các lệnh gọi API Hệ thống tệp.

Tiếp tục bước này, chúng ta cũng có thể kéo và thả một thư mục và/hoặc tệp vào một <input type="file"> thông thường, sau đó truy cập vào các mục đó dưới dạng thư mục Hệ thống tệp hoặc mục tệp. Bạn có thể thực hiện việc này thông qua .webkitEntries:

<input type="file" multiple>

function onChange(e) {
    e.stopPropagation();
    e.preventDefault();

    var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.

    [].forEach.call(entries, function(entry) {

    // Copy the entry into our local filesystem.
    entry.copyTo(fs.root, null, function(copiedEntry) {
        ...
    }, onError);

    });
}

document.querySelector('input[type="file"]').addEventListener('change', onChange);

Tôi đã tạo một bản minh hoạ thư viện ảnh để minh hoạ các kỹ thuật nhập tệp/thư mục này.

Chạy bản minh hoạ

Để tìm hiểu thêm về API Hệ thống tệp HTML5, hãy xem bài viết Khám phá API Hệ thống tệp.