رفع الملفات بواسطة السحب والإفلات عن طريق DropzoneJS وعرض مصغرات للصور

Ali Majrashiمنذ 9 سنوات

DropzoneJS هي مكتبة JavaScript مفتوحة المصدر حجمها خفيف لاتعتمد بعملها على مكتبات أخرى مثل Jquery وسهلة التعامل ومرنة بالإستخدام حيث تتيح لك العديد من الخيارات والمزايا لعمل خاصية رفع الملفات في مشاريعك البرمجية بواسطة السحب والإفلات مع إمكانية عرض مصغرات للصور المرفوعة وعرض بعض معلومات الملف المرفوع مثل اسم الملف و حجم الملف وعند اكتمال التحميل سوف تظهر لك ايقونة بعلامة صح✔️ اما اذا حدث خطأ فستحصل على ايقونة بعلامة خطأ✖️تسطيع عن طريق المكتبة توليد حقل بهذا الشكل

آلية عمل DropzoneJS

عند استخدام المكتبة مع أحد النماذج لديك وتوليد حقل رفع الملفات فإنه سيتم إنشاء مربع خاص بسحب وإفلات الملفات المراد تحميلها بداخله عندها ستقوم المكتبة باخذ الملفات ومعلوماتها وإرسال امر اجاكس AJAX إلى موقعك لتقوم انت بوضع آلية لإستقبال ورفع الملفات لموقعك باي لغات برمجة المواقع مثل PHP

طريقة إستخدام DropzoneJS

قم بتحميل آخر إصدار عن طريق هذا الرابط >> Download << وبعد انتهاء عملية التحميل داخل مجلد المكتبة يوجد مجلد بإسم dist وبداخله اهم ملفين dropzone.css و dropzone.js قم بتضمين الملفين داخل صفحتك بواسطة


<script src="dropzone.js"></script> 
<link rel="stylesheet" href="dropzone.css">

وبعدها قم بإنشاء نموذج Form وقم بتحديد action و class و id ليسهل التعامل مع النموذج بكل سهولة بمجرد ان تقوم بوضع dropzone داخل class فإن المكتبة ستتعرف على النموذج وتقوم بإدراج حقل رفع الملفات بشكل آلي للنموذج مثال للنموذج كالتالي


<form action="file-upload.php" class="dropzone" id="my-awesome-dropzone">

</form>

لو توجهت للمتصفح فإن الناتج سيكون كالتالي

إذا كنت ترغب بإضافة نص داخل المربع توضح للمستخدم كيفية الإستخدام تختفي بمجرد ان يقوم المستخدم بإفلات ملف لتحميله تستطيع بكل سهولة بإضافة div داخل النموذج وحدد له class باسم dz-message ليصبح كود النموذج كالتالي


<form action="file-upload.php" class="dropzone" id="my-awesome-dropzone">
	<div class="dz-message">
	    Drop files here or click to upload.<br>
	    <span class="note">
	    (This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)
	    </span>
	</div>
</form>

بعدها تستطيع التحكم بشكل الحقل كما تريد عن طريق CSS فلو ترغب ان يكون شكل النموذج نفس الشكل الذي بموقع المكتبة كل ماعليك هو إنشاء ملف css جديد لنفرض ان اسم الملف basic.css وقم بوضع هذا الكود باخله


#dropzone {
    margin-bottom: 3rem;
}

.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
}

.dropzone .dz-message {
    font-weight: 400;
}

.dropzone .dz-message .note {
    font-size: 0.8em;
    font-weight: 200;
    display: block;
    margin-top: 1.4rem;
}

بعدها قم بتضمين الملف داخل الصفحة باستخدام


<link rel="stylesheet" href="basic.css">

ليصبح شكل النموذج بالمتصفح كالتالي

كما تستطيع عمل حقل احتياطي لتحميل الملفات في حالة تم تعطيل عمل JavaScript بالمتصفح باستخدام هذا الكود داخل النموذج


  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>

حيث انه اذا كانت المكتبة تعمل بدون مشاكل فإنه سيتم حذف الحقل الإحتياطي مباشرة وعرض مربع المكتبة وتضمين حقل تحميل الملفات تلقائيا للمنوذج

هذه ابسط طرق عمل حقل تحميل الملفات بالسحب والإفلات عن طريق HTML و لكن ان كنت ترغب بإنشاء النموذج عن طريق Javascript فتسطيع عن طريق هذا الأمر إنشاء النموذج و حقل تحميل الملفات و تحديد رابط action لإرسال الملفات لكي يتم تحميلها للسيرفر


// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

ايضا تستطيع عن طريق استخدام Jquery بواسطة هذا الأمر


// jQuery
$("div#myId").dropzone({ url: "/file/post" });

التحكم بخصائص المكتبة

تسطيع وبكل سهولة التحكم بجميع خصائص المكتبة عن طريق JavaScript مثلا تسطيع تغير اسم المتغير المستخدم عند إنشاء حقل تحميل الملفات إفتراضيا يكون اسم المتغير file وتسطيع تغييره لما يناسبك او تسطيع اضافة action url إذا لم يتم تعريف action داخل النموذج ومن الممكن تحديد حجم الملفات المراد تحميلها قبل إرسالها للسيرفر ومن الممكن السماح لرفع مجموعة ملفات دفعة واحدة للسيرفر او لا تسطيع زيارة موقع المكتبة وتصفح جميع خيارات التحكم بالمكتبة

نسطتيع التحكم بجميع الخيارات عن طريق استهداف اسم المعرف للنموذج id بعدما نقوم بتغيير المسمى ودمج الكلمات ان وجدت واستخدام camelized version من الإسم ونستخدم Dropzone.options.idName لتحديد جميع الإعدادات مثلا


// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
};

تحميل الملفات للسيرفر

عمل المكتبة هو إنشاء واجهة جميلة ومنسقة وتسهيل عملية رفع الملفات عن طريق سحبهم وإفلاتهم داخل مربع ثم عرض مصغرات لهم ولكن يجب ان تقوم انت ببرمجة طريقة رفعهم الفعلية للسيرفر باستخدام إحدى اللغات التي تتعامل مع السيرفرات مثل PHP المكتبة سوف تقوم بأخذ الملفات وإرسال طلب اجاكس AJAX Request الى عنوان action الذي قمت بتحديده داخل النموذج حيث ان جميع الملفات سوف تكون تحت اسم المتغير file مالم تقم انت بتغييره تسطيع زيارة موقع المكتبة حيث يوجد الكثير من روابط الدروس لطريقة برمجة آلية رفع الملفات للسيرفر بعدة لغات عن طريق هذا الرابط server side implementation

كلمات دليلية:

إعجاب

أعجبني

3219

مشاهدات

تلقائي