اکنون یک پوشه را در Chrome بکشید و رها کنید

Eiji Kitamura

همانطور که برنامه های وب در حال تکامل هستند، ممکن است برای شما مفید باشد که به کاربران اجازه دهید فایل ها را از روی دسکتاپ روی مرورگر بکشند و آن ها را برای ویرایش، آپلود، اشتراک گذاری و غیره بکشند. اما متأسفانه، ما نتوانسته ایم پوشه ها را روی صفحات وب بکشیم و رها کنیم. خوشبختانه، با شروع Chrome 21، این مشکل برطرف خواهد شد (از قبل در کانال توسعه کروم موجود است).

انتقال چندین فایل با کشیدن و رها کردن

بیایید به یک نمونه کد از کشیدن و رها کردن موجود نگاه کنیم.

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

توجه داشته باشید که یک تفاوت بزرگ در اینجا این است که شما می توانید با استفاده از تابع جدیدی به نام getAsEntry ( webkitGetAsEntry ) با یک شی حذف شده به عنوان Entry ( FileEntry یا DirectoryEntry ) رفتار کنید. پس از دسترسی به شی Entry ، می توانید از روش های استاندارد مدیریت فایل که در مشخصات FileSystem API معرفی شده اند استفاده کنید. برای مثال، این مثال نشان می‌دهد .isDirectory چگونه می‌توانید با بررسی فیلد .isFile .

برای اطلاعات بیشتر در مورد FileSystem API، Exploring the FileSystem APIs را بخوانید، در مورد قابلیت جدید کشیدن و رها کردن، این سند را بخوانید. البته، این ویژگی ها استانداردهای باز هستند یا در انتظار تبدیل شدن به زودی هستند.