تستخدم واجهة ملف HTML5 ملفات للتنزيل على صفحة الويب

توفر واجهة الملف معلومات تتعلق بالملفات وتشغيل JavaScript على صفحة الويب للوصول إلى محتوى الملف.

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

لاستخدام الملفات على صفحة الويب ، فإن الكائنات التي تحتاج عادةً إلى المشاركة هي: كائن الملف ، كائن FileList ، كائن FileReader.

يأتي FileList من مكانين ، خاصية الملفات لعنصر الإدخال و API السحب والإفلات (عند سحب الملف ، event.datatransfer.files هو كائن Filelist)

 <INPUT ID = fileitem type = file> var fileList = document.getElementById ('fileitem')

الطول: هذه السمة تُرجع فقط طول كائن الملف الموجود في الكائن FileList.

العنصر (الفهرس): احصل على كائن الملف المحدد في الموضع المحدد في كائن FileList. يمكن إطلاعه في شكل عدة فهارس الصفيف

كل من كائن FileList هو كائن الملف. كائن الملف هو نقطة خاصة.

1.LastModify: الوقت الذي يتم فيه مراجعة الملف ، هذه المرة هو المللي ثانية التي تم تمريرها في 0: 0: 00 في 1 يناير 1970. إنها سمة قابلة للقراءة

2.NAME: اسم ملف الملف المشار إليه بواسطة كائن الملف ، وهو سمة قابلة للقراءة

3.Type: نوع الملف للملف المشار إليه بواسطة كائن الملف هو نوع المنجم ، وهو سمة قابلة للقراءة.

4.Size: حجم الملف للملف المشار إليه بواسطة كائن الملف ، هذه السمة -القراءة.

لا توجد وسيلة لتحديد كائن الملف وحده ، ولكن لديه وسيلة للوراثة من كائن Blob.

يمكّن كائن FileReader تطبيقات الويب من قراءة الملفات على كمبيوتر المستخدم بشكل غير متزامن.

FileReader () هو مُنشئ يمكنه إنشاء كائن FileReader جديد من خلاله.

var fileReader = new FileReader () ؛

1.error: إرجاع الخطأ الذي يحدث أثناء عملية القراءة.

2.Result: إرجاع محتوى الملف ، والنوع يستحق الكتابة أو ArrayBuffer. هذه السمة قانونية فقط بعد قراءة العملية.

3. ReadyState: إرجاع الحالة الحالية للعملية.

1.abort (): مقاطعة القراءة. تصبح قيمة ReadyState 2. 2.

2. ReadAsarrayBuffer (Blob): اقرأ Blob المحدد ، مثل كائن الملف (كائن الملف هو نقطة خاصة). طالما تم الانتهاء من القراءة ، ستصبح قيمة خاصية ReadyState 2 ، وسمة النتيجة هي ArrayBuffer التي تمثل بيانات الملف.

3. ReadAsdataurl (Blob): اقرأ Blob المحدد ، مثل كائن الملف (نقطة خاصة). طالما تم الانتهاء من القراءة ، ستصبح قيمة سمة ReadyState 2. سمة النتيجة هي عنوان URL الذي يمثل بيانات الملف ، وتنسيق البيانات هو سلسلة BASE64 -ANDED

 <type type = file onChange = PreviewFile ()> <br> <img src = height = 200 var Preview = document.queeryselector ('img') ؛ الملفات [0] ؛

4. ReadastExt (Boob ، الترميز): اقرأ Blob المحدد ، مثل كائن الملف (كائن الملف هو نقطة خاصة). طالما قراءتها ، ستصبح قيمة خاصية ReadyState 2 ، وسمة النتيجة هي سلسلة نصية تمثل بيانات الملف. المعلمة الثانية اختيارية.

1.Abort: إنهاء عند القراءة.

2. خطأ: يتم تشغيله عند قراءة عمليات أثناء العملية.

3. تحميل: نشأ عند قراءة العملية بنجاح.

4.Loadend: نشأ في نهاية عملية القراءة. لا يمكن قراءة النجاح أو الفشل.

5. تحميل: نشأ في بداية عملية القراءة.

6. العملية: نشأت أثناء عملية القراءة.

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

 <نوع الإدخال = معرف الملف = إدخال>

الوصول إلى الملفات المحددة من خلال الإدخال

 var selectfile = document.getElementById ('Inport').

يمكنك فقط اختيار ملف واحد في وقت واحد في كل مرة. حدد ملفات متعددة في وقت واحد قبل Gecko 1.9.2.

لواجهة السحب والإفلات ، يمكنك عرض HTML5 Dragevent.

الخطوة 1: إنشاء منطقة وضع. عنصر عادي ، مثل div ، p ، إلخ.

الخطوة 2: إضافة برنامج معالجة الأحداث Drop ، Dragenter ، Dragover إلى المنطقة الموضوعة. الدور الرئيسي هو برنامج معالجة الأحداث المتساقط.

فيما يلي مثال على رسم تخطيطي قصير:

 <div id = 'dropbox' class = 'dropbox'>

 Var Dropbox ؛ (E) {E.StopPropagation () ؛ ) ؛ i] ؛ ) ؛

ما سبق هو واجهة ملف HTML5 التي قدمها Xiaobian لتنزيل ملفات الويب. شكرا جزيلا لدعمكم لموقع VEVB Wulin!