В этой статье представлено краткое введение в распределенное чтение файлов HTML5 FileReader и его метод, а также рассказывается о нем всем. Подробности следующие:
визуализации
Старое правило — сначала показывать рендеры.
Сначала представим некоторые методы и события FileReader в H5.
метод чтения файла
| имя | эффект |
|---|---|
| о() | Прекратить чтение |
| readAsBinaryString (файл) | Прочитать файл в двоичной кодировке |
| readAsDataURL (файл) | Прочитать файл в формате DataURL |
| readAsText(файл, [кодировка]) | Читать файл как текст |
| readAsArrayBuffer(файл) | Считать файл в массив-буфер |
FileReaderEvent
| имя | эффект |
|---|---|
| начало загрузки | Срабатывает при начале чтения |
| прогресс | Чтение |
| окончание загрузки | Запускается при завершении чтения, независимо от успеха или неудачи. |
| загрузка | Срабатывает, когда чтение файла завершается успешно |
| аборт | Запускается по прерыванию |
| ошибка | Срабатывает при ошибке |
код
Основная идея распределенного чтения файлов — разделить файл на блоки и читать их каждые 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> var Progress = document.getElementById('Progress' ); // Индикатор выполнения var event = { load: function () { console.log('loaded' }, Progress: function (percent) { console.log(percent); успех: функция () { console.log('success'); } }; // Запускаем событие onchange после выбора файла для загрузки document.getElementById('File').onchange = function (e) { var файл = this.files[0]; console.log(файл) //loadFile.js загрузчик = новый FileLoader(файл, события }); document.getElementById('Abort').onclick = function () { loader.abort() } </script></body></html>;раздел loadFile.js
/** Модуль чтения файла* объект файла файла* события возвращаемый объект события включает успех, загрузку, прогресс*/var FileLoader = function (file,events) { this.reader = new FileReader(); loading = 0; this.total = file.size; //Чтение 1M каждый раз this.step = 1024 * 1024; this.events = event || //Читаем первый блок 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 процент, handler = this.events.progress;//Индикатор прогресса this.loaded += loading; = (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); Прервать чтение abort: function () { var reader = this.reader if(reader) { reader.abort() } }};Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.