การผสานรวมอินพุต[type=file] กับ Filesystem API

สมมติว่าคุณมีแอปแต่งภาพและต้องการให้ผู้ใช้สามารถลากรูปภาพหลายร้อยรูปมาคัดลอกลงในแอปของคุณ คุณจะทําอย่างไร

ในโพสต์ล่าสุด Eiji Kitamura ได้ไฮไลต์ฟีเจอร์ใหม่ที่ไม่ค่อยมีคนสังเกตเห็นแต่มีประสิทธิภาพสูงใน API การลากและวาง ซึ่งก็คือความสามารถในการลากโฟลเดอร์และดึงข้อมูลโฟลเดอร์เหล่านั้นเป็นออบเจ็กต์ HTML5 Filesystem API FileEntry และ DirectoryEntry (ทำได้โดยการเข้าถึงเมธอดใหม่ใน DataTransferItem, .webkitGetAsEntry())

สิ่งที่ยอดเยี่ยมมากเกี่ยวกับส่วนขยาย .webkitGetAsEntry() คือความสามารถในการนำเข้าไฟล์และทั้งโฟลเดอร์ได้อย่างราบรื่น เมื่อคุณมี FileEntry หรือ DirectoryEntry จากเหตุการณ์การลากแล้ว ขั้นตอนถัดไปคือการใช้ copyTo() ของ Filesystem API เพื่อนำเข้าไฟล์ไปยังแอป

ตัวอย่างการคัดลอกโฟลเดอร์ที่วางหลายโฟลเดอร์ไปยังระบบไฟล์

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

เยี่ยมมาก อีกครั้ง ความเรียบง่ายนี้มาจากการใช้ DnD ร่วมกับการเรียกใช้ Filesystem API

นอกจากนี้ เรายังสามารถลากและวางโฟลเดอร์และ/หรือไฟล์ลงใน <input type="file"> ปกติ แล้วเข้าถึงรายการดังกล่าวเป็นไดเรกทอรีระบบไฟล์หรือรายการไฟล์ ซึ่งทำได้ผ่าน .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);

เราได้รวบรวมการสาธิตแกลเลอรีรูปภาพเพื่อแสดงเทคนิคต่างๆ เหล่านี้ในการนำเข้าไฟล์/โฟลเดอร์

การสาธิตการเปิดตัว

ดูข้อมูลเพิ่มเติมเกี่ยวกับ HTML5 Filesystem API ได้ที่การสํารวจ Filesystem API