تقدم هذه المقالة مقدمة مختصرة عن قراءة الملفات الموزعة بتنسيق HTML5 FileReader وطريقتها، ومشاركتها مع الجميع. التفاصيل هي كما يلي:
الاداءات
القاعدة القديمة هي إظهار الاداءات أولا.
قم أولاً بتقديم بعض الأساليب والأحداث الخاصة بـ FileReader في H5
طريقة قارئ الملفات
| اسم | تأثير |
|---|---|
| عن() | إنهاء القراءة |
| قراءة AsBinaryString (ملف) | قراءة الملف وترميز ثنائي |
| قراءة AsDataURL (ملف) | قراءة الملف بترميز DataURL |
| قراءة كنص (ملف، [ترميز]) | قراءة الملف كنص |
| readAsArrayBuffer(ملف) | قراءة الملف في arraybuffer |
FileReaderEvent
| اسم | تأثير |
|---|---|
| com.onloadstart | الحرائق عند بدء القراءة |
| com.onprogress | قراءة |
| com.onloadend | يتم تشغيله من خلال إكمال القراءة، بغض النظر عن النجاح أو الفشل |
| تحميل | يتم تشغيله عند اكتمال قراءة الملف بنجاح |
| onabort | تم تشغيله عند المقاطعة |
| com.onerror | أثار على خطأ |
شفرة
الفكرة الأساسية للقراءة الموزعة للملفات هي تقسيم الملف إلى كتل وقراءتها كل M.
جزء HTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>المستند</title></head><body> <form> <fieldset> <legend>اقرأ خطوة بخطوة الملف:</legend> <input type=file id=File> <input type=button value=interrupt id=Abort> <p> <lable>قراءة التقدم:</lable> <progress id=Progress value=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> varprogress = document.getElementById('Progress' );// شريط التقدم var events = {load: function () { console.log('loaded' },progress: function (percent) { console.log(percent); Success: function () { console.log('success'); var Loader; // تشغيل حدث onchange بعد تحديد الملف المراد تحميله document.getElementById('File').onchange = function (e) { var file = this.files[0]; console.log(file) //loadFile.js Loader = new FileLoader(file, events }; document.getElementById('Abort').onclick = function () {loader.abort() } </script></body></html>قسم LoadFile.js
/** وحدة قراءة الملف* كائن ملف الملف* يتضمن كائن إرجاع الأحداث النجاح والتحميل والتقدم*/var FileLoader = function (file, events) { this.reader = new FileReader(); this.file = this; Loaded = 0; this.total = file.size; // اقرأ 1 مليون في كل مرة this.step = 1024 * 1024; // اقرأ الكتلة الأولى this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, Reader = this.reader = function ( e ) { _this.onLoad(); }; read.onprogress = function (e) { _this.onProgress(e.loaded }; ، إحباط، لا تتم إضافة عمليات رد الاتصال للأخطاء في الوقت الحالي}، // يُرجع حدث التقدم onProgress: function (loaded) { var بالمائة, Handler = this.events.progress;// شريط التقدم this.loaded += Loaded بالمائة; = (this.loaded / this.total) * 100; Handler && Handler(percent }, // نهاية القراءة (يتم استدعاؤها في نهاية كل عملية قراءة، وليس بالكامل) onLoad: function () { var Handler = this.events.load; // يجب إرسال بيانات القراءة هنا Handler && Handler(this.reader.result); // إذا لم تكتمل القراءة، فاستمر في القراءة if (this.loaded < this.total) { this.readBlob(this.loaded); else { // اكتملت القراءة this.loaded = this.total; // إذا عاد النجاح، قم بتنفيذ this.events.success && this.events.success(); } }, // اقرأ محتوى الملف readBlob: function (start) { var blob, file = this.file; // إذا كانت طريقة الشريحة مدعومة، فاقرأها بالخطوات، وإذا لم تكن كذلك، اقرأ مرة واحدة if (file.slice) { blob = file.slice(start, start + this.step) } else { blob = file } this.reader.readAsText(blob }); إحباط القراءة: function () { var Reader = this.reader if(reader) { Reader.abort() } }};ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.