สมมติว่าคุณมีแอปแก้ไขรูปภาพและต้องการให้ผู้ใช้สามารถลากรูปภาพนับร้อยภาพเพื่อคัดลอกลงในแอป แล้วคุณจะทำอย่างไร
ในโพสต์ล่าสุด Eiji Kitamura ได้ไฮไลต์ฟีเจอร์ใหม่ที่เล็กน้อยแต่ทรงพลังในการลากและวาง API ความสามารถในการลากโฟลเดอร์และดึงข้อมูลเป็น HTML5 Filesystem API FileEntry
และออบเจ็กต์ DirectoryEntry
รายการ (ทำได้โดยใช้เมธอดใหม่ใน DataTransferItem, {10/Item}).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">
ปกติแล้วเข้าถึงรายการในรูปแบบไดเรกทอรี Filesystem หรือรายการไฟล์ได้ โดยดำเนินการผ่าน .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 โปรดดูการสำรวจ API ของระบบไฟล์