أمثلة على استخدام ملف html5 API لقراءة الملفات المحلية (مثل الصور وPDF وما إلى ذلك)

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

يوفر HTML5 طريقة جديدة للعب، باستخدام المتصفح وحده، يمكنك عرض وقراءة ومعالجة الملفات المحلية (في الواقع، يمكن أيضًا أن تكون عن بعد) (الصور بشكل أساسي)، ويتم كل هذا من خلال واجهة برمجة تطبيقات ملفات HTML5 يحقق.

الأول هو أن بنية البيانات تحدد نوع كائن ملف لتمثيل الملفات، وكل كائن ملف يتوافق مع ملف. يحتوي كائن الملف على ثلاث سمات: الاسم والحجم والنوع. الاسم هو اسم الملف بدون مسار، والحجم هو حجم الملف بالبايت، والنوع هو MIME للملف (مثل الصورة/jpg).

كائن الملف غير موجود بمفرده، ولكن في شكل مصفوفة، في مصفوفة تسمى FileList. لذا، كيفية الحصول على مجموعة FileList هذه؟ حاليًا، هناك طريقتان للحصول على FileList في HTML5، إحداهما من خلال إدخال نوع الملف، والأخرى من خلال حدث الإفلات لعملية السحب والإفلات.

الحصول على FileList من خلال إدخال نوع الملف

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

أو السمة المتعددة الجديدة في HTML5 التي تسمح باختيار ملفات متعددة:

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

بشكل عام، نقوم بإرفاق حدث onchange إلى ملف الإدخال: بحيث يمكن تنفيذ الخطوات التالية مثل قراءة الملف على الفور بعد تحديد المستخدم للملف:

 // الأصلي jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, HandleFiles, false);function HandleFiles() { var fileList = this.files }//jquery version$('#file-input ').on('change', function() { var fileList = this.files;});

أولاً، قم بتعيين منطقة للسحب والإفلات:

 <div id=dropbox style=width: 200px;height: 200px;></div>

بالإضافة إلى ذلك، من أجل تشغيل حدث الإسقاط، يجب علينا منع السلوك الافتراضي لأحداث Dragenter و Dragover:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, Dragenter, false);dropbox.addEventListener(dragover, Dragover, false);dropbox.addEventListener(drop, drop, false);وظيفة Dragenter(e) { e.stopPropagation(); e.preventDefault();}وظيفة السحب(e) { e.stopPropagation(); e.preventDefault();}

بعد ذلك، يمكننا الحصول على fileList في رد الاتصال لحدث الإسقاط:

 function drop(e) { e.stopPropagation(); var dt = e.dataTransfer;

يوفر HTML5 حلين: FileReader وObjectUrl.

تحتاج أولاً إلى إنشاء كائن FileReader:

 قارئ var = new FileReader();

يعد استخدام FileReader لقراءة كائنات الملف عملية غير متزامنة، نحتاج إلى تعيين رد اتصال لحدث التحميل لـ FileReader أولاً لإخبار FileReader بالعمليات الإضافية التي يجب أن يقوم بها بعد قراءة بيانات كائن الملف:

 Reader.onload = function(e) { document.getElementById(image).src = e.target.result };

معنى الكود أعلاه هو أنه بعد أن يقرأ FileReader بيانات الصورة، فإنه يضع البيانات (DataUrl) في سمة src.

أخيرًا، يتم استخدام الطرق المختلفة لـ FileReader لتحديد تنسيق البيانات الذي سيتم استخدامه لتخزين بيانات كائن الملف بعد قراءتها، وتنفيذ القراءة:

1. readAsArrayBuffer(file): اقرأ كائن الملف وقم بتخزينه ككائن ArrayBuffer (لم أكتشف بعد ما هو كائن ArrayBuffer، يجب أن يكون بنية بيانات تم إنشاؤها للوصول الفعال إلى البيانات).
2. readAsText(file [, 'UTF-8']): اقرأ كائن الملف في وضع النص العام. تجدر الإشارة إلى أنه يمكن استخدام المعلمة الثانية (اختياري) لتحديد ترميز الأحرف.
3. readAsDataURL(file): اقرأ كائن الملف وقم بتخزينه كسلسلة في البيانات: تنسيق URL.

ObjectURL يعادل مسارًا مؤقتًا للملف، ويمكن إنشاء هذا المسار المؤقت وإصداره في أي وقت، ولا يختلف عن عنوان URL العادي.

خذ عرض صورة محلية على الصفحة كمثال:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

في هذا الوقت، يبدو src كما يلي: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

يتيح استخدام src للمتصفح قراءة الصورة محليًا.

بالمقارنة مع استخدام FileReader لإنشاء ترميز base64 للصورة ووضعها في src، فقد تم تحسين أداء هذا الحل بشكل كبير.

بمقارنة هذين الحلين لقراءة كائنات الملفات، يعد FileReader مناسبًا لتحميل الملفات، بينما ObjectURL مناسب للتشغيل مباشرة في المتصفح، ثم تحميل البيانات المعالجة بعد العملية، مثل استخدام اللوحة القماشية لالتقاط لقطات شاشة أو إجراء ضغط الصور، وما إلى ذلك . وبطبيعة الحال، كل هذا يتوقف على التوافق.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.