سجل موجز لبعض الرموز التي تقوم بتحميل H5 هذا الصباح وما زالت هناك عيوب
1. العرض
نظرًا لأنه يجب تمرير ملف التحميل الأمامي من خلال النموذج ، ولا يمكن استخدام Ajax. وبهذه الطريقة ، ليس من الجيد حقًا وضع إدخال مع ملف النوع على صفحة الهاتف المحمول. كما هو موضح في الشكل أدناه ، هل هو محبط للغاية؟
بعد العثور على الحل ، استبدلت بعض أجهزة الكمبيوتر هذه الإدخال بفلاش ، باستخدام مكتبة أدوات jQuery مثل التحميل ، ولكن معظم متصفحات المحمول لا تدعم الفلاش. لذا فإن الطريقة النهائية هي استخدام النموذج ، ما عليك سوى تعيين شفافية النموذج والإدخال إلى 0 ، بحيث تكون في DIV مع استعداد المحتوى لعرضه ، ويمكن صنع المحتوى المعروض كما تريد. الرمز كما يلي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device ، inial-scale = 1.0 ، stilection-scalable = no"> </title> <style> <style> div {width: 100 ٪ ؛}. الهامش: 0 Auto ؛} .Upload {الموضع: النسبية ؛ العرض: 80px ؛ الارتفاع: 18px ؛ خط الارتفاع: 18px ؛ اللون: #fff ؛ padding: 0px 5px ؛ -webkit-border-radius: 2px ؛ الحدود radius: 2px ؛ الهامش: 0 Auto ؛ } .upload form {width: 100 ٪ ؛ الموضع: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العتامة: 0 ؛ مرشح: alpha (عتامة = 0) ؛}.المظهر كما هو موضح في الصورة ، لذلك يتم عرضه في "صورة تحميل" p-tag. النقر فوقه سيعطيك تأثير تحديد الملف
2. كود JS
لقد كتبت الأمر بسيطًا جدًا ، فقط باستخدام الوظائف الأساسية لتحميل H5
رمز HTML كما يلي ، الإجراء هو طريق الطلب. ما أفعله هنا هو تحميل وتعديل الصورة الرمزية عندما يتغير الملف. لا يمكن حذف سمة اسم علامة الإدخال ، فهي مرتبطة بواجهة الواجهة الخلفية.
<form id = "eploadform" enctype = "multipart/form-data" method = "post" Action = "xxxxxx"> <input type = "file" name = "imagefile" id = "imagefile" onChange =
var imaxfilesize = 2097152 ؛ //2mwindow.fileselected = function () {var ofile = document.getElementById ('imagefile'). files [0] ؛ // اقرأ الملف var rfilter =/^(image // bmp | image // gif | image // jpeg | image // png | image // tiff) $/i ؛ if (! rfilter.test (forile.type)) {Alert ("يجب أن يكون تنسيق الملف صورة") ؛ يعود؛ } if (forile.size> imaxfilesize) {Alert ("لا يمكن أن يتجاوز حجم الصورة 2M") ؛ يعود؛ } var vfd = new FormData (document.getElementById ('eploadform')) ، // إنشاء طلب وبيانات oxhr = new xmlhttprequest () ؛ oxhr.addeventListener ('load' ، function (resupload) {// success} ، false) ؛ oxhr.addeventListener ('error' ، function () {// favor} ، false) ؛ Oxhr.AddeventListener ('Abort' ، function () {// upload interrupt} ، false) ؛ Oxhr.Open ('post' ، actionurl) ؛ Oxhr.Send (VFD) ؛} ؛تحدد التفاصيل النجاح أو الفشل ، لذلك يجب أن تأخذ كل شيء على محمل الجد.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.