บทความนี้จะแนะนำข้อมูลเบื้องต้นเกี่ยวกับการอ่านไฟล์ HTML5 FileReader แบบกระจายและวิธีการของไฟล์ และแบ่งปันกับทุกคน รายละเอียดมีดังนี้:
การเรนเดอร์
กฎเก่าคือต้องแสดงการเรนเดอร์ก่อน
ขั้นแรกแนะนำวิธีการและเหตุการณ์บางอย่างของ FileReader ใน H5
วิธีการ FileReader
| ชื่อ | ผล |
|---|---|
| เกี่ยวกับ() | ยุติการอ่าน |
| readAsBinaryString (ไฟล์) | อ่านไฟล์เป็นการเข้ารหัสไบนารี |
| อ่าน AsDataURL (ไฟล์) | อ่านไฟล์เป็นการเข้ารหัส DataURL |
| readAsText (ไฟล์ [การเข้ารหัส]) | อ่านไฟล์เป็นข้อความ |
| readAsArrayBuffer(ไฟล์) | อ่านไฟล์ลงใน arraybuffer |
เหตุการณ์ FileReader
| ชื่อ | ผล |
|---|---|
| โหลดเริ่มต้น | ไฟไหม้เมื่อเริ่มอ่าน |
| กำลังดำเนินการอยู่ | การอ่าน |
| กำลังโหลดอยู่ | ทริกเกอร์เมื่ออ่านเสร็จแล้ว โดยไม่คำนึงถึงความสำเร็จหรือความล้มเหลว |
| กำลังโหลด | ทริกเกอร์เมื่อการอ่านไฟล์เสร็จสมบูรณ์ |
| ทำแท้ง | ทริกเกอร์เมื่อขัดจังหวะ |
| 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 ค่า=0 สูงสุด=100></ความคืบหน้า> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> ความคืบหน้า var = document.getElementById('ความคืบหน้า' );// แถบความคืบหน้า var events = { load: function () { console.log('loaded'); }, ความคืบหน้า: function (เปอร์เซ็นต์) { console.log(percent); ความสำเร็จ: function () { console.log('success'); } }; // ทริกเกอร์เหตุการณ์ onchange หลังจากเลือกไฟล์ที่จะอัปโหลด document.getElementById('File').onchange = function (e) { var file = this.files[0]; console.log(ไฟล์) //loadFile.js loader = new FileLoader(ไฟล์, เหตุการณ์); document.getElementById('Abort').onclick = function () { loader.abort(); } </script></body></html>ส่วน loadFile.js
/** โมดูลการอ่านไฟล์* วัตถุไฟล์* เหตุการณ์ วัตถุส่งคืน รวมถึงความสำเร็จ, โหลด, ความคืบหน้า*/var FileLoader = ฟังก์ชั่น (ไฟล์, เหตุการณ์) { this.reader = new FileReader(); this.file = file; โหลด = 0; this.total = file.size; // อ่าน 1M แต่ละครั้ง this.step = 1024 * 1024; this.events = เหตุการณ์ ||. //อ่านบล็อกแรก this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; ) { _this.onLoad(); }; reader.onprogress = ฟังก์ชั่น (e) { _this.onProgress(e.loaded); }; , ยกเลิก, การเรียกกลับข้อผิดพลาดจะไม่ถูกเพิ่มในขณะนี้}, // เหตุการณ์ความคืบหน้าส่งกลับ onProgress: function (loaded) { var เปอร์เซ็นต์, ตัวจัดการ = this.events.progress;// แถบความคืบหน้า this.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 Network