لفترة طويلة ، تعرض المطورين من خلال هذا. تستخدم بعض مواقع الويب سمة Enableype = Multipart/Form-Data ، لكن هذه السمة تتطلب من الخادم إعداد إعدادات خاصة لعرض التقدم ، وهو أمر معقد أيضًا لنا.
الآن دعونا نرى لماذا يمكن لـ HTML5 حل هذه المشكلة ، ومدى جودة ذلك.
تحميل الملفات باستخدام HTML5في معيار HTML5 ، يتم إعادة تعريف كائن XMLHTTPREQUEST ، المعروف باسم XMLHTTPREQUEST المستوى 2 ، والذي يحتوي على الميزات الخمس الجديدة التالية:
1. دعم تحميل وتنزيل بايت ، مثل الملفات ، النقط ، وبيانات النموذج
2. أضاف تقدم التحميل والتنزيل
3. دعم طلبات الصليب
4. السماح بطلب مجهول (أي جزء الإحالة الذي لا يرسل HTTP)
5. السماح مهلة الطلب
في هذا البرنامج التعليمي ، نولي اهتمامًا للميزات الأولى والثانية بشكل أساسي ، وخاصة العنصر الثاني-يمكن أن يوفر تقدم التحميل الذي نريده. على عكس الخطة السابقة ، لا يتطلب هذا الحل من الخادم إعداد إعدادات خاصة ، حتى يتمكن الجميع من تجربتها من خلال النظر في البرنامج التعليمي.
الرسم البياني أعلاه هو المحتوى الذي يمكننا تحقيقه:
1. عرض معلومات الملف التي تم تحميلها ، مثل اسم الملف ، والكتب ، والحجم
2. شريط التقدم الذي يمكن أن يظهر تقدمًا حقيقيًا
3. سرعة التحميل
4. تقدير بقية الوقت
5. كمية البيانات التي تم تحميلها
6. استجابة الخادم التي تم إرجاعها بعد انتهاء التحميل
بالإضافة إلى ذلك ، مع XMLHTTPRequest ، فإن عملية التحميل الخاصة بنا غير متزامنة ، لذلك عندما يقوم المستخدم بتحميل الملف ، لا يزال بإمكانه تشغيل عناصر أخرى في صفحة الويب ، وليس هناك حاجة إلى الانتظار حتى يتم تحميلها لإكمالها. بعد انتهاء التحميل ، يمكننا الحصول على الاستجابة من الخادم ، وبالتالي فإن عملية التحميل بأكملها منطقية تمامًا.
حدث التقدم HTML5يضيف HTML5 حدث تقدم جديد ، والذي يوفر لنا المعلومات التالية:
1. حجم الوريد الإجمالي
2. محملة -حجم التحميل
3. الطول يمكن حساب التقدم
لا يوجد الكثير من المعلومات ، ولكن يكفي حساب تقدم الملف. بالطبع ، لا يزال هناك العديد من الأشياء التي لا تعطيها مباشرة ، وهذا أمر مؤسف.
HTMLلا يختلف الأمر كثيرًا عن رمز تحميل الملف العادي. ومع ذلك ، لاحظ أن علامة الإدخال تربط وظيفة JavaScript على OnChange.
<! row> <label for = fileToupload> حدد ملفًا للتحميل </label> <type type = file name = fileToupload id = fileToupload = fileselec ted () ؛/> </viv> <div id = filename> </viv> <div id = filedize> </viv> <div id = fileType> </viv> <div class = row> <input type = button onClick = UploadFile () value = upload/>> << divجافا سكريبت
بمجرد استخدام الإدخال في HTML ، يمكننا الحصول على كائن FileList في رمز JS. هذا الكائن هو جزء من ملف API المضافة حديثًا في HTML5.
1. الاسم - اسم الملف (لا يتضمن المسار)
2. النوع -وشر (صغير)
3. حجم الحجم (الوحدة بايت)
هذا هو بالضبط ما نحتاجه. بالطبع ، يحتوي HTML5 أيضًا على كائن FileReader ، لكننا لم نستخدمه هنا. الآن ، من خلال المحتويات الثلاثة أعلاه ، يمكننا التحكم في الحجم وأنواع الملفات التي تم تحميلها بواسطة المستخدم من أجل تقليل الضغط أثناء الخادم وتحسين عامل الأمان.
FULICE FILED () {var file = document. .size * 100 / (1024 * 1024)) / 100) .tring () + 'mb' ؛ document.getElementByed (اسم FileNmed) "اكتب: ' + file.type ؛}}
إذن ماذا سيحدث عندما يختار المستخدم ملفًا جيدًا وانقر فوق تحميل؟
Functionfile () {var xhr = new xmlhttprequest () ؛ إرسال (fd) ) + '٪' ؛} آخر {document.gtelementById ('ProgressNumber') .innerhtml = 'غير قادر على حساب' ؛}} (Evt.Target.Responsetext) ؛
في السطر الثاني من التعليمات البرمجية ، يستخدم رمز JS الخاص بنا كائنًا جديدًا آخر -تم إطلاقه بواسطة HTML5 آخر. كائن FormData هو مجموعة بيانات نموذج المستخدم. نرسل بيانات إلى الخادم عن طريق تحويل هذا الكائن.
بالطبع ، يمكننا أيضًا إنشاء هذا الكائن يدويًا في الكود ، على سبيل المثال ، مثل ما يلي:
var fd = new FormData () ؛ ]) ؛
العودة إلى الموضوع. إذا نظرنا إلى الوراء في الكود السابق ، أضفنا العديد من مراقبة الأحداث لـ XMLHTTPREQUEST. على وجه الخصوص ، من المهم أن نلاحظ أن ما نربطه ليس xmlhttprequest نفسه ، ولكن سماته ، مثل التحميل.
رمز كاملأخيرًا ، ألقِ نظرة على الرمز الكامل.
<! [0] ؛ ) + 'mb' ؛ .NAME FD.Append (Filetoupload ، document.getelementbyed ('filetoupload'). false) النسبة المئوية = Math.Round (ev.load * 100 / evt.total) ؛ لحساب '؛ بواسطة المستخدم أو المستعرض أسقطت الاتصال.) ؛} </script> </head> <Boody> <form id = form1 enctype = multipart/form-data method = post action = upload.php> <div class = row > <label = filetoup load> حدد ملفًا للتحميل </label> <type type = file name = fileToupload id = fileToupload onChange = filelect () ؛/> </viv> <div id = filename> </div> < معرف div = fi lesize> </viv> <div id = fileType> </viv> <div class = row> <input type = button onClick = UploadFile () value = upload/> </viv m> </body> </html>
هل تم اكتمال مهمتنا؟ يمكن القول أنه اكتمل ، لأن هذا الرمز كان قادرًا على إكمال مهمة تحميل الملفات ، ويمكنه أيضًا عرض التقدم المحرز ؛ لدينا العديد من الأشياء التي لم يتم القيام بها ، مثل CSS ، مثل CSS تجميل وهلم جرا. ولكن هذا ليس موضوع مقالتنا.
أخيرًا ، أذكرك بأنه يجب تشغيل رمز البرنامج التعليمي على المتصفح الذي يدعم الميزات الجديدة.
ما سبق هو كل محتويات هذا المقال.