ลากและวางโฟลเดอร์ลงใน Chrome ได้แล้ว

Eiji Kitamura

เมื่อเว็บแอปพัฒนาไปเรื่อยๆ คุณอาจพบว่าการอนุญาตให้ผู้ใช้ลากและวางไฟล์จากเดสก์ท็อปไปยังเบราว์เซอร์เพื่อแก้ไข อัปโหลด แชร์ ฯลฯ นั้นสะดวกดี แต่น่าเสียดายที่เรายังลากและวางโฟลเดอร์ไปยังหน้าเว็บไม่ได้ แต่โชคดีที่ตั้งแต่ Chrome เวอร์ชัน 21 เป็นต้นไป ปัญหานี้จะได้รับการแก้ไข (มีให้บริการในเวอร์ชันสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome แล้ว)

ส่งไฟล์หลายรายการด้วยการลากและวาง

มาดูตัวอย่างโค้ดของการลากและวางที่มีอยู่กัน

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

ในตัวอย่างนี้ คุณสามารถลากและวางไฟล์จากเดสก์ท็อปไปยังเบราว์เซอร์ได้ แต่เมื่อพยายามส่งโฟลเดอร์ ระบบจะปฏิเสธหรือถือว่าโฟลเดอร์นั้นเป็นออบเจ็กต์ File ซึ่งทำให้ดำเนินการไม่สำเร็จ

วิธีจัดการโฟลเดอร์ที่วาง

Chrome 21 ให้คุณวางโฟลเดอร์หรือโฟลเดอร์หลายโฟลเดอร์ลงในหน้าต่างเบราว์เซอร์ได้ หากต้องการจัดการกับกรณีเหล่านี้ คุณต้องเปลี่ยนวิธีจัดการกับวัตถุที่วาง

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

โปรดทราบว่าความแตกต่างที่สำคัญคือคุณสามารถจัดการออบเจ็กต์ที่วางเป็น Entry (FileEntry หรือ DirectoryEntry) โดยใช้ฟังก์ชันใหม่ที่ชื่อ getAsEntry (webkitGetAsEntry) หลังจากได้รับสิทธิ์เข้าถึงออบเจ็กต์ Entry แล้ว คุณจะใช้วิธีการจัดการไฟล์มาตรฐานที่ระบุไว้ในข้อกำหนดของ FileSystem API ได้ ตัวอย่างเช่น ตัวอย่างนี้แสดงวิธีตรวจหาว่าออบเจ็กต์ที่วางเป็นไฟล์หรือไดเรกทอรีโดยตรวจสอบช่อง .isFile (หรือ .isDirectory)

ดูข้อมูลเพิ่มเติมเกี่ยวกับ FileSystem API ได้ที่การสํารวจ FileSystem API และดูข้อมูลเกี่ยวกับความสามารถในการลากและวางแบบใหม่ได้ที่เอกสารนี้ แน่นอนว่าฟีเจอร์เหล่านี้เป็นมาตรฐานแบบเปิดหรือกำลังรอที่จะกลายเป็นมาตรฐานแบบเปิดในเร็วๆ นี้