كيفية ررفع الملفات من خلال السحب والإفلات في جافاسكريبت JavaScript؟

توجد مكتبة Dropzone.js أظنها الأفضل والأكثر شيوعا، تمتلك حتى جزء خاص بالتلاعب مع الملفات على مستوى الخادم، 

تثبت عن طريق:

npm install --save dropzone

او عن طريق تضمين الملفات المصدرية:

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

ثم تمرير معرف العنصر المستهدف الى التابع الباني الخاص بهاته المكتبة:

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

تعرف عن المكتبة اكثر من خلال التوثيق الخاص بها.

يمكننا استغلال قوة web api المدمجة في لغة الجافاسكريبت مثل تأثيرات السحب والإفلات وغيرها 

1. قم بسحب وإسقاط ملف تحميل HTML CSS 

<div class="upload-container">
      <input type="file" id="file_upload" />
</div>
<br>
<button class="upload-btn" onclick="uploadFiles()">حفظ</button>

• هنا حددنا منطقة حاوية تحميل لإسقاط ملفات التحميل.
• يتم تعريف عنصر <input> في HTML بنوع السمة = "file" لاستيعاب ملف التحميل.
• يتم تعريف عنصر <button> في HTML لإرسال ملفات التحميل.

وهنا بعض التنسيقات بلغة css 

.upload-container {
    position: relative;
}
.upload-container input {
    border: 1px solid #92b0b3;
    background: #f1f1f1;
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    padding: 100px 0px 100px 250px;
    text-align: center !important;
    width: 500px;
}
 
.upload-container input:hover {
    background: #ddd;
}
 
.upload-container:before {
    position: absolute;
    bottom: 50px;
    left: 245px;
    content: " (or) Drag and Drop files here. ";
    color: #3f8188;
    font-weight: 900;
}
 
.upload-btn {
    margin-left: 300px;
    padding: 7px 20px;
}

سحب وإسقاط ملف التحميل بالجافاسكريبت

الآن سوف نستخدم كود Javascript لقراءة الملفات المرفوعة وإرسالها للتحميل.

function uploadFiles() {
  // نحدد طول الملفات المختارة لنعمل عليها تست بسيط
    var files = document.getElementById('file_upload').files;
    if(files.length==0){
        alert("يرجى تحديد الملفات...");
        return;
    }
    var filenames="";
    for(var i=0;i<files.length;i++){
        filenames+=files[i].name+"\n";
    }
    alert("الملفات المختارة:\n____________________\n"+filenames);
}