ลากและวางโฟลเดอร์ลงใน 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 ได้ที่หัวข้อการสำรวจ API ของ FileSystem เกี่ยวกับความสามารถในการลากและวางแบบใหม่ โปรดอ่านเอกสารนี้ แน่นอนว่าฟีเจอร์เหล่านี้เป็นมาตรฐานแบบเปิดหรือกำลังรอให้มีให้ใช้งานได้เร็วๆ นี้