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 次のように
単純にファイルを作成します読み込みボタン入力

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

ログイン後にコピー

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

var choose = document.getElementById(&#39;choose&#39;);var img = document.getElementById(&#39;image&#39;);
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(&#39;choose&#39;);
var demo = document.getElementById(&#39;demo&#39;);
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 サイトの他の関連記事を参照してください。