Artikel ini memperkenalkan pengenalan singkat tentang pembacaan file terdistribusi HTML5 FileReader dan metodenya, dan membagikannya kepada semua orang. Dengan rincian sebagai berikut:
rendering
Aturan lamanya adalah menampilkan renderingnya terlebih dahulu.
Pertama perkenalkan beberapa metode dan kejadian FileReader di H5
Metode Pembaca File
| nama | memengaruhi |
|---|---|
| tentang() | Hentikan pembacaan |
| readAsBinaryString(berkas) | Baca file sebagai pengkodean biner |
| readAsDataURL(berkas) | Baca file sebagai DataURL yang dikodekan |
| readAsText(file, [pengkodean]) | Baca file sebagai teks |
| readAsArrayBuffer(berkas) | Baca file ke dalam arraybuffer |
FileReaderEvent
| nama | memengaruhi |
|---|---|
| onloadstart | Kebakaran saat pembacaan dimulai |
| dalam perkembangannya | Membaca |
| onloadend | Dipicu oleh penyelesaian baca, terlepas dari keberhasilan atau kegagalan |
| memuat | Dipicu ketika pembacaan file berhasil diselesaikan |
| membatalkan | Dipicu saat interupsi |
| kesalahan | Dipicu karena kesalahan |
kode
Ide inti dari pembacaan file yang terdistribusi adalah membagi file menjadi beberapa blok dan membacanya setiap M.
bagian HTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokumen</title></head><body> <form> <fieldset> <legend>Baca langkah demi langkah File:</legend> <input type=file id=File> <input type=button value=interrupt id=Batalkan> <p> <lable>Baca progres:</lable> <progress id=Progress nilai=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> var progres = document.getElementById('Progress' );//Bilah kemajuan var events = { memuat: fungsi () { console.log('loaded'); }, kemajuan: fungsi (persen) { console.log(persen); sukses: function () { console.log('success'); var loader; // Memicu event onchange setelah memilih file yang akan diunggah document.getElementById('File').onchange = function (e) { var file = ini.file[0]; console.log(file) //loadFile.js loader = FileLoader baru(file, acara }; document.getElementById('Batalkan').onclick = function () { loader.abort(); } </script></body></html>bagian loadFile.js
/** Modul pembacaan file* objek file file* peristiwa objek pengembalian peristiwa mencakup keberhasilan, pemuatan, kemajuan*/var FileLoader = fungsi (file, peristiwa) { this.reader = new FileReader(); dimuat = 0; this.total = file.size; //Baca 1M setiap kali this.step = 1024 * 1024; //Baca blok pertama this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; ) { _ini.onLoad(); }; pembaca.onprogress = fungsi (e) { _ini.onProgress(e.loaded }; , batalkan, panggilan balik kesalahan tidak ditambahkan untuk saat ini}, // Acara kemajuan kembali onProgress: function (dimuat) { var persen, handler = this.events.progress;//Progress bar this.loaded += dimuat; = (ini. dimuat / ini.total) * 100; handler && handler(persen }, //Akhir pembacaan (dipanggil pada akhir setiap eksekusi pembacaan, bukan keseluruhan) onLoad: function () { var handler = this.events.load; // Data yang telah dibaca harus dikirim ke sini handler && handler(this.reader.result); // Jika pembacaan belum selesai, lanjutkan membaca if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // Baca selesai this.loaded = this.total; // Jika sukses kembali, jalankan this.events.success && this.events.success(); } }, // Baca konten file readBlob: function (start) { var blob, file = this.file; sekali Baca if (file.slice) { gumpalan = file.slice(mulai, mulai + ini.langkah } else { gumpalan = file } this.reader.readAsText(blob); Batalkan pembacaan batalkan: function () { var reader = this.reader; if(reader) { reader.abort();Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.