كيفية انشاء معاينة الصورة قبل التحميل في HTML CSS & JavaScript

ستتعلم اليوم في هذه المدونة كيفية معاينة الصورة قبل التحميل أو زر تحميل الملف باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية معاينة الصورة قبل التحميل أو زر تحميل الملف باستخدام HTML CSS وجافا سكريبت.

في هذا البرنامج ، في البداية ، على صفحة الويب ، توجد حاوية معاينة ملف بها أيقونة سحابية وزر تحميل. عند النقر فوق الزر "اختيار ملف" ، سيتم فتح نافذة جديدة لتحديد صورة أو ملف. بعد تحديد الملف ، تظهر معاينة هذا الملف في حاوية المعاينة. وعندما تحوم فوق الملف ، سيظهر اسم هذا الملف في الجانب السفلي من حاوية المعاينة. يظهر أيضًا زر إلغاء (علامة متقاطعة) وعندما تنقر على هذا الزر ، سيتم إخفاء ملف المعاينة الذي حددته أو إلغاؤه.

هذا البرنامج ممكن فقط مع كائن ملفات JavaScript. تقوم خاصية الملف بإرجاع كائن FileList ، الذي يصف الملف أو الملفات المحددة بواسطة زر تحميل الملف. من خلال كائن FileList ، يمكنك الحصول على اسم وحجم ومحتويات الملفات. هذه الخاصيه للقراؤه فقط.

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (معاينة الصورة قبل التحميل أو زر تحميل الملف).

في الفيديو ، لقد رأيت كيف يعمل هذا البرنامج بالفعل وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. كما تعلم بالفعل ، فإن ميزات التحميل والمعاينة لهذا البرنامج ممكنة فقط باستخدام JavaScript. يمكنك أيضًا إنشاء زر تحميل ملف بسيط أو افتراضي باستخدام علامة HTML فقط (ملف نوع <input>).

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

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

معاينة الصورة قبل التحميل أو زر تحميل الملف
لإنشاء هذا البرنامج (معاينة الصورة قبل التحميل). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow