ستوضح هذه الكتابة طريقة تحميل الصورة باستخدام JavaScript و HTML.
كيفية تحميل صورة بسيطة باستخدام JavaScript / HTML؟
لتحميل صورة بسيطة باستخدام JavaScript ، سنضيف أولاً علامة صورة في صفحة HTML ثم نستخدم رمز JavaScript لتحميل الصورة واختيارها في صفحة الويب.
للتأثيرات العملية ، جرب التعليمات المذكورة.
مثال
بادئ ذي بدء ، اتبع التعليمات المقدمة:
- أدخل ال ' <إدخال> 'وحدد نوع الإدخال كـ' ملف '.
- يحدد نوع 'الملف' هذا الحقل في اختيار الملف و ' تصفح زر 'لتحميل الملفات.
- '
'تُدرج علامة فاصل أسطر. - ثم أدخل ' 'علامة HTML وإضافة' بطاقة تعريف 'لتحديد المعرف الفريد باسم معين.
- ' src ”المستخدمة لإضافة عنوان URL لملف الوسائط:
< ر >
< معرف الصورة = 'صورتي' src = '#' >
يمكن ملاحظة أنه تم إنشاء خيار ملف ، ويمكن فقط عرض اسم الصورة بعد قبولها كمدخل:
الآن ، داخل ' '، استخدم الشفرة التالية:
< النصي >
نافذة او شباك. addEventListener ( 'حمولة' ، وظيفة ( ) {
وثيقة. الاستعلام ( 'إدخال [نوع = 'ملف']' ) . addEventListener ( 'يتغير' ، وظيفة ( ) {
لو ( هذا . الملفات && هذا . الملفات [ 0 ] ) {
فريمغ = وثيقة. getElementById ( 'img_content' ) ؛
IMG. تفريغ = ( ) => {
URL . إبطالObjectURL ( IMG. src ) ؛
}
IMG. src = URL . إنشاءObjectURL ( هذا . الملفات [ 0 ] ) ؛
}
} ) ؛
} ) ؛
النصي >
في مقتطف الشفرة أعلاه:
- ' addEventListener () تسمح طريقة JavaScript بإدراج أو إرفاق معالج حدث محدد بعنصر.
- ' محدد الاستعلام () 'هي طريقة تُستخدم لإرجاع العنصر الأول في المستند المعين الذي يرتبط بمحدد معين.
- ' getElementById () 'طريقة للحصول على العنصر باستخدام المعرف المحدد. لهذا الغرض ، يتم تمرير قيمة المعلمة.
- ' إبطالObjectURL () 'يصدر عنوان URL كائن موجود تم إنشاؤه باستخدام عنوان URL. للقيام بذلك ، يتم تمرير عنوان URL للصورة كمعامل لهذه الطريقة.
- ' createObjectURL () 'هي طريقة جافا سكريبت ثابتة تجعل سلسلة معينة لها عنوان URL يمثل الكائن الذي تم تمريره في المعلمة.
انتاج |
يمكن ملاحظة أننا نجحنا في تحميل صورة بسيطة.
خاتمة
لتحميل الصورة البسيطة باستخدام JavaScript ، استخدم ' addEventListener () 'الذي يسمح بإدراج أو إرفاق معالج حدث محدد بعنصر. بعد ذلك ، قم بالوصول إلى العنصر المحدد بواسطة المعرف واستخدم ' إبطالObjectURL () ' و ' createObjectURL () ' طُرق. ذكر هذا المنشور طريقة تحميل الصور البسيطة باستخدام JavaScript / HTML.