具体的にはHTML5ファイル読み込みFileReaderとファイル読み込みモジュールのカプセル化を解析します。

FileReader は File-API の重要な部分です
ローカル ファイルを読み取るために使用されます

FileReader

作成

ファイル読み取り関数を使用するには
FileReader オブジェクトをインスタンス化する必要もあります

var fr = new FileReader();

それはいくつかのインターフェイスを提供しますメソッドとイベント

メソッド

インスタンスオブジェクトを通じて5つのメソッドを呼び出すことができます
そのうち4つはファイル読み取りメソッドを指定します
もう1つのメソッドはファイル読み取りを中断するために使用されます

FileReader.readAsBinaryStringFile/Blobファイルはバイナリ文字列として読み取られ、各バイトには 0 から 255 までの整数が含まれますFileReader.readAsTextFile/Blob[,encoding]ファイルはテキスト文字列として読み取られます。デフォルトのテキストエンコード形式は「UTF-8」ですが、オプションのパラメータを通じて他のエンコード形式を指定できますFileReader.readAsDataURLFile/BlobファイルはBase64でエンコードされたData-URIオブジェクトとして読み取られますFileReader.readAsArrayBufferFile/Blobファイルは ArrayBuffer オブジェクトとして読み取られますabort()None ファイルの読み取りを終了します

API	パラメータ	説明

注: Blob (Bin ary ラージ オブジェクト) はバイナリですオブジェクト

ファイルの読み取りが成功したかどうかは関係ありません
これらの関数には戻り値がありません
ファイルの読み取り結果は、インスタンス化された FileReader オブジェクトの result 属性に格納されます

Events

上記のメソッドに加えて、ファイル読み取りオブジェクト さらに、ファイル読み取りのさまざまな状態をキャプチャするためのイベント モデルの完全なセットも含まれています。 error

onabort: 読み取りが中断されました

• onloadend: 読み取りが完了しました（成功または失敗に関係なく）

• 使用
• 今度は、このファイルリーダーを使用してローカルイメージを読み取ります

  html 次のように

  単純にファイルを作成します読み込みボタン入力
と読み込んだ画像を表示するimgタグ

• <input type="file" id="choose"><br><br><img src="" id="image" width=&#39;200px&#39; height=&#39;200px&#39;>

• jsスクリプトは以下の通り

  var choose = document.getElementById('choose');var img = document.getElementById('image');
  choose.onchange = function(){
    showImg(this, img);
  }function showImg(chooseDom, imgDom){
    var file = chooseDom.files[0]; //获取FileList对象的第一个元素——一个File对象
    var fr = new FileReader(); //实例化FileReader对象
    fr.onload = function(e){ 
      imgDom.src = e.target.result; //e.target引用fr
    }
    fr.readAsDataURL(file); //读取为DataURL}

ノードを取得したら
• inputタグにchangeイベントをバインド

  このようにファイルが選択されるたびに、それを読み取るために showImg 関数が呼び出されます

読み取った内容を確認するには、file.type

if(!/image\/\w+/.test(file.type)){  
    //...
    return false;  
}

をチェックするか、テキストを読みたい場合
単にreadAsText

<input type="file" id="choose"><br><br><p id="demo"></p>

var choose = document.getElementById('choose');
var demo = document.getElementById('demo');
choose.onchange = function(){
  showText(this, demo);
}function showText(chooseDom, textDom){
  var file = chooseDom.files[0];  var fr = new FileReader();
  fr.onload = function(e){
    textDom.innerHTML = e.target.result;
  }
  fr.readAsText(file);
}

を使用してください

---

ファイルの読み取りモジュール

ファイル読み取り

をより適切に処理するには、ファイル読み取りモジュールをカプセル化する必要があります

//events事件回调对象包含
success,load,progressvar FileLoader = function (file, events) {
    this.reader = new FileReader();    
    this.file = file;    
    this.loaded = 0;    
    this.total = file.size;    
    this.step = 1024 * 1024;//每次读取1M
    this.events = events || {};    
    this.bindEvent();    
    this.readBlob(0);//读取第一块}
FileLoader.prototype = {
    bindEvent: function (events) {
        var _this = this,
            reader = this.reader;
        reader.onload = function (e) {
            _this.onLoad();
        };
        reader.onprogress = function (e) {
            _this.onProgress(e.loaded);
        };        // start、abort、error回调暂无
    },
    onProgress: function (loaded) {
        var percent,
            handler = this.events.progress;        
            this.loaded += loaded;
        percent = (this.loaded / this.total) * 100;
        handler && handler(percent);
    },    // 读取结束（每一次执行read结后调用）
    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;            
            // 如果有success回调则执行
            this.events.success && this.events.success();
        }
    },    // 读取文件内容
    readBlob: function (start) {
        var blob,
            file = this.file;        
            // 若支持slice方法，则分步读取，不支持就一次性读取
        if (file.slice) {
            blob = file.slice(start, start + this.step + 1);
        } else {
            blob = file;
        }        this.reader.readAsText(blob);
    },    
    // 中止读取
    abort: function () {
        var reader = this.reader;        
        if(reader) {
            reader.abort();
        }
    }
}

以上が具体的にはHTML5ファイル読み込みFileReaderとファイル読み込みモジュールのカプセル化を解析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。