يمكنك الآن سحب مجلد وإفلاته على Chrome.

إيجي كيتامورا

Twitter GitHub تأثير اهتزاز Mastodon

مع تطور تطبيقات الويب، ربما تكون قد وجدت أنه من السهل السماح للمستخدمين بسحب الملفات وإفلاتها من سطح المكتب إلى المتصفح للتعديل، وتحميلها، ومشاركتها، وما إلى ذلك. ولكن للأسف، لم نتمكن من سحب المجلدات وإفلاتها في صفحات الويب. لحسن الحظ، سيتم التعامل مع هذه المشكلة بدءًا من الإصدار 21 من Chrome (وهو خيار متاح حاليًا في قناة مطوّري برامج 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، مما سيؤدي إلى حدوث إخفاق.

كيفية التعامل مع المجلدات التي تم إسقاطها

يسمح لك الإصدار 21 من Chrome بإفلات مجلد أو مجلدات متعددة في نافذة المتصفّح. وللتعامل مع هذه العناصر، عليك تغيير طريقة تعاملك مع العناصر التي تم إسقاطها.

<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. على سبيل المثال، يوضّح هذا المثال كيفية اكتشاف ما إذا كان الكائن الذي تم إفلاته ملفًا أو دليلاً من خلال الاطّلاع على الحقل .isFile (أو .isDirectory).

للحصول على المزيد من المعلومات عن واجهة برمجة التطبيقات FileSystem، يُرجى الاطّلاع على استكشاف واجهات برمجة التطبيقات FileSystem بشأن إمكانية السحب والإفلات الجديدة، يُرجى قراءة هذا المستند. لا شكّ في أنّ هذه الميزات لا تزال معايير مفتوحة أو تنتظر أن تصبح متوفّرة قريبًا.