この記事では、HTML5 FileReaderによるファイルの分散読み込みの概要とその方法を紹介し、皆さんに共有します。詳細は以下のとおりです。
レンダリング
古いルールでは、最初にレンダリングを表示します。
まず、H5 の FileReader のメソッドとイベントをいくつか紹介します。
FileReader メソッド
| 名前 | 効果 |
|---|---|
| について（） | 読み取りを終了する |
| readAsBinaryString(ファイル) | ファイルをバイナリエンコーディングとして読み取る |
| readAsDataURL(ファイル) | ファイルを DataURL エンコードとして読み取る |
| readAsText(ファイル, [エンコーディング]) | ファイルをテキストとして読み取る |
| readAsArrayBuffer(ファイル) | ファイルを配列バッファに読み込みます |
ファイルリーダーイベント
| 名前 | 効果 |
|---|---|
| onloadstart | 読み取り開始時に発火します |
| 進行中 | 読む |
| オンロードエンド | 成功または失敗に関係なく、読み取り完了によってトリガーされます |
| オンロード | ファイルの読み取りが正常に完了するとトリガーされます |
| 中止します | 割り込みでトリガーされる |
| エラー時 | エラー時にトリガーされる |
コード
ファイルの分散読み取りの中心となるアイデアは、ファイルをブロックに分割し、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 events = {load:function(){console.log('loaded'); },progress:function(percent){console.log(percent); success: function () { console.log('success'); } varloader; // アップロードするファイルを選択した後に onchange イベントをトリガーします document.getElementById('File').onchange = function (e) file = this.files[0]; console.log(file) //loadFile.js ローダー = new FileLoader(ファイル, イベント); document.getElementById('Abort').onclick = function () {loader.abort()} </script></body></html>loadFile.js セクション
/** ファイル読み取りモジュール* ファイル ファイル オブジェクト* イベント イベント 戻りオブジェクトには成功、ロード、進行状況が含まれます*/var FileLoader = function (file, events) { this.reader = new FileReader();ロード = 0; this.total = file.size; //毎回 1M を読み取ります this.step = 1024 * 1024; //最初のブロックを読み取ります this.readBlob(0); this.bindEvent(); }FileLoader.prototype = {bindEvent: function (events) { var _this = this, Reader = this.reader = function ( e ) { _this.onLoad() }; Reader.onprogress = 関数 (e) { _this.onProgress(e.loaded) }; 、中止、エラー コールバックは当面追加されません}, // 進行状況イベントは onProgress: function (loaded) { var パーセント, handler = 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);読み取りを中止します。abort: function () { var Reader = this.reader;以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。