في مجال تطوير الويب، هناك طرق متعددة لتحميل الملفات عند جمع مدخلات المستخدم. إحدى الطرق هي النسخ واللصق. يعد النسخ واللصق لإدخال الملفات طريقة بديهية للغاية لتحميل الملفات من المستخدمين. تعمل طريقة إدخال الملف بالنسخ واللصق على إعفاء المستخدمين من الحاجة إلى حفظ موقع الملف الذي يريدون تحميله. في هذه المقالة، سنناقش كيفية تنفيذ إدخال الملفات عن طريق النسخ واللصق على موقع الويب الخاص بك.

سنقوم بتنفيذ إدخال ملف النسخ واللصق من خلال الاستفادة من واجهات ClipboadEvent وEventTarget. توفر واجهة ClipboardEvent معلومات حول حدث اللصق، وتسمح لنا واجهة EventTarget بالاستماع إلى حدث اللصق.

أثناء الاستماع إلى حدث اللصق، سنقوم بإرفاق وظيفة معالج الأحداث حيث نقرر ما يجب فعله بالعناصر الملصقة. في حالتنا، سنأخذ الملف الملصق ونعرضه فورًا بعد تحميله بالكامل في المتصفح. سنبدأ بـ HTML والأنماط.

HTML والأنماط

فلنبدأ بإنشاء علامة HTML لمنطقة اللصق. مقتطف الكود أدناه هو علامة HTML:

    
    
    
    


    

        Paste your file here
    
    

    

يعرض مقتطف الكود أعلاه حاوية مستطيلة يمكننا لصق الملفات بداخلها. تحتوي الحاوية على سمة تسمى contenteditable مضبوطة على true. تعد السمة contenteditable مهمة لتمكين لصق الملفات أو أي عناصر أخرى في الحاوية. إذا تم تغيير السمة contenteditable إلى false أو إزالتها، فلن يعمل إجراء اللصق كما هو متوقع. لدينا أيضًا حاوية بمعرف المعاينة. سوف نستخدم حاوية المعاينة لمعاينة الصورة التي قام المستخدم بلصقها.

دعونا نضيف بعض الأنماط الأساسية إلى ترميزنا من style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

تنشئ العلامات وورقة الأنماط أعلاه حاوية بسيطة ذات حدود شرطة مع نص مطالبة بسيط كما هو موضح في لقطة الشاشة أدناه:

الآن بعد أن أنشأنا واجهة المستخدم، دعنا نضيف بعض الوظائف المفيدة باستخدام JavaScript في القسم التالي.

النص

في هذا القسم، سنستخدم JavaScript لإضافة مستمع حدث اللصق إلى منطقة اللصق. قبل أن نحصل على منطقة اللصق من DOM لإرفاق مستمع الحدث، ننتظر أولاً حتى يتم تحميل محتوى DOM كما في مقتطف الكود أدناه.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

في مقتطف الكود أعلاه، أضفنا مستمعًا لحدث DOMContentLoaded. يتيح لنا ذلك الانتظار حتى يتم إنشاء شجرة DOM قبل أن نتمكن من الحصول على عناصر DOM. بعد ذلك، نختار حاوية منطقة اللصق ونلحق بها مستمع حدث اللصق.

الحصول على الملف من العناصر التي تم لصقها

تم ترك معالج حدث اللصق دون تنفيذ في مقتطف الكود السابق. دعونا ننفذ ذلك عن طريق الحصول على البيانات من كائن الحدث وتسجيلها في وحدة التحكم. سنفعل المزيد مع البيانات لاحقًا في المقالة، في الوقت الحالي، نريد فقط التأكد من استلام الملفات عند لصق العناصر في منطقة اللصق. يوضح مقتطف الكود أدناه الحد الأدنى من تنفيذ معالج حدث اللصق.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

في مقتطف التعليمات البرمجية أعلاه، نحصل على عناصر من كائن events.clipboardData. Event.clipboardData.items عبارة عن DataTransferItemList وهو كائن يشبه القائمة يحتوي على محتوى العناصر الملصقة. يتم تخزين العناصر في قائمة لأنه من الممكن للمستخدم نسخ ولصق عناصر متعددة مرة واحدة.

بعد ذلك، نقوم بالتكرار على العناصر باستخدام حلقة for ...of. في الحلقة، نتحقق مما إذا كان كل عنصر عبارة عن ملف. إذا كان العنصر من "ملف" الملك، فإننا نحصل عليه كملف ونطبعه على وحدة تحكم المتصفح.

لا تعد طباعة معلومات الملف على وحدة التحكم مفيدة جدًا لمستخدمي صفحة الويب الخاصة بك. دعونا نفعل شيئًا أكثر إثارة للاهتمام في القسم التالي.

معاينة الملف الذي تم تحميله

سيكون من الصعب على المستخدم معرفة أن تحميل الملف كان ناجحًا بعد لصق العناصر في الحافظة إذا لم نعرضها في أي مكان. من المهم الإشارة إلى أنه تم تحميل الملف بنجاح من خلال عرض شيء يشير إلى النجاح. ما هي أفضل طريقة للإشارة إلى نجاح التحميل من عرض الملف الذي تم تحميله نفسه؟

في هذا القسم، سنقوم بتوسيع معالج حدث اللصق لإنشاء عنوان URL من الملف المستلم. سنستخدم عنوان URL الذي تم إنشاؤه لعرض الملف بمجرد تحميله في المتصفح. سوف نستفيد من FileReader API لإنشاء عنوان URL من الملف كما هو مشفر في المقتطف أدناه.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

في مقتطف التعليمات البرمجية أعلاه، أنشأنا مثيلاً لـ FileReader واستخدمناه لإنشاء عنوان URL للبيانات. لقد قمنا أيضًا بإلحاق مستمع حدث التحميل بكائن FileReader حيث نقوم بتسجيل نتيجة القراءة إلى وحدة التحكم. هذه هي الخطوة الأولى نحو معاينة الملف، يمكننا الآن استخدام عنوان URL لعرض الملف.

بافتراض أن المستخدم قام بلصق ملفات الصور، يوضح مقتطف الكود التالي كيف يمكننا توسيع معالج الحدث لإنشاء عنوان URL وعرض ملف الصورة.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

في مقتطف الكود أعلاه، نحصل على حاوية المعاينة من DOM وننشئ عنصر img لعرض الصورة. نقوم بتعيين عنوان URL الذي تم إنشاؤه باعتباره src للصورة ونلحق الصورة بحاوية المعاينة. بمجرد إلحاق الصورة بحاوية المعاينة، يمكن للمستخدم الآن معرفة أن الصورة التي قام بلصقها قد تم تحميلها بنجاح في صفحة الويب.

نجاح! لقد نجحنا في تنفيذ عمليات تحميل الملفات عن طريق النسخ واللصق على صفحة الويب. تمنح طريقة تحميل الملفات هذه المستخدمين امتياز تحميل الملفات بسهولة دون الحاجة إلى النقر فوق عدة أزرار لتحديد الملف المراد تحميله. توفر واجهة ClipboadEvent طريقة سهلة لجمع البيانات من العناصر الملصقة على المتصفح. تتيح لنا واجهة FileReader إنشاء عنوان URL من الملف الذي تم تحميله واستخدامه لمعاينة الملف الذي تم تحميله.

لا تتردد في قول شيء ما في قسم التعليقات. اكتشف المزيد حول ClipBoardEvent وواجهات FileReader من MDN.