html5 FileReader

FileReaderは、input要素で選択するファイル、ドラッグ操作で取得したファイル、および1つのHTML CanvasElement上でmozGetAsFile()メソッドを実行した後の戻り結果を非同期で操作することができる.
コンストラクタ
FileReader()
属性リスト

error DOMErrorがファイルを読み込む際に発生するエラー.読み取り専用

readyState unsigned shortはFileReaderオブジェクトの現在の状態を示す.値はState constantsの1つです.読み取り専用

result jsvalが読み出すファイルの内容.この属性は、読み出し動作が完了する後にのみ有効である、データのフォーマットは、読み出し動作がどの方法によって開始するかに依存する.読み取り専用

readyState 3状態

readyState=0、file Readerオブジェクトは

を確立したばかりです.

readyState=1、ファイルの読み取りを開始する

readyState=2、ファイル読み込み完了メモリ

イベントリスト

onabortファイルの読み取り中に、ユーザはabortメソッドを呼び出して

のトリガを阻止する.

onerrorファイル読み込みプロセスエラー発生

onload全体のファイルの読み取りが完了し、ユーザーはabortを持っていない.ファイルの読み取り争いは正常に

をトリガーする.

onloadendの読み取りが完了すると、ユーザがabortを強制したり、エラーを読み出したりしても、最終的にこのイベント

がトリガーされます.

onloadstart読み取り開始イベント

onprogress読み込み進捗

メソッドのリスト

abortは、abortイベントとerrorイベント

をトリガーするファイルの読み取りを強制的に停止する.

readAsData URL(Blob blob)ファイルのデータパスを読み取る、画像などを読み取るのに適した

.

readAsText(Blob blob,optional DOMString encode)は文字列の形式で読み取り、テキストファイルの読み取りに適しており、テキストファイルの内容

に戻る.

readAsArrayBuffer(Blob blob)は、ファイルを配列データとして読み込みます.これは、

の操作ファイルに役立ちます.

readAsBinaryString(Blob blob)は、サーバ

にファイルを読み込むのに適したバイナリ文字をファイルに読み込む.
ちょっとした実験をする
readAsTextでテキストファイルの内容をコンソールに読み込む

//html  
 <input type = "file" id = "myfile"/><br>
   ： <p id = "tip"></p>

//javascript  
var tip = document.querySelector("#tip");
var fileEle = document.querySelector("#myfile"); //       

var reader = new FileReader();
reader.onload = function(ev){ //      
  tip.innerText = "onload";
  var result = reader.result;
  tip.innerText = result ; //       <p>   
}
fileEle.onchange = function(){ //        
    var file = fileEle.files[0]; //      file,file  Blob   
    reader.readAsText(file,"UTF-8"); //        
}

readAsData URLで画像をドラッグして画面に表示

//html  
<div class = "target" id = "target"></div> 

//js  
var target = document.querySelector("#target"); //      

var reader = new FileReader();
var file = null ;
reader.onload = function(ev){ //    ，           
    var result = reader.result;
    var img = new Image();
    img.src = result ;
    target.appendChild(img);
 }

target.addEventListener("drop",function(ev){ //        ，    
  file = ev.dataTransfer.files[0];
  reader.readAsDataURL(file);
  ev.preventDefault();  //         
});

readAsBinaryStringによるサーバへのバイナリファイルのアップロード

//html  
 <input type = "file" id = "myfile"/><br>
 <button type = "button" id = "abort">    </button><br>
   ： <p id = "tip"></p>

//javascript  
var tip = document.querySelector("#tip");
var btn = document.querySelector("#abort");
var fileEle = document.querySelector("#myfile"); //       

var reader = new FileReader();
var size = 0 ;
btn.onclick = function(){
   reader.abort(); //      ，   abort error  
};

fileEle.onchange = function(){ //       
   var file = fileEle.files[0];
   size = file.size ; //      ，       
   reader.readAsBinaryString(file); //    
}
reader.onabort = function(ev){
     tip.innerText = "onabort";
}
reader.onerror = function(ev){
  tip.innerText = "onerror";
}
reader.onload = function(ev){ //    ，    jq ajax
    $.ajax({
        url : "xxx",
        type : "post",
        data : {file,reader.result}  //       
        success : function(){
          tip.innerText = "      ";
        },
        error : function(){
          tip.innerText = "      ";
        }
    });
}
reader.onloadend = function(ev){
  tip.innerText = "onloadend";
}
reader.onloadstart = function(ev){
  tip.innerText = "onloadstart";
}
reader.onprogress = function(ev){ //      
  tip.innerText = (reader.result.length / size) * 100 + "%";
}

readAsArrayBuffer,new Blob,createObjectURLを使用してダウンロードリンクを作成

//html  
 <input type = "file" id = "myfile"/><br>

//javascript  
var fileEle = document.querySelector("#myfile"); //       

var reader = new FileReader();
reader.onload = function(ev){ //      
    var blob = reader.readAsArrayBuffer();

    var _blob = new Blob([blob],{type,"image/png"}); //       bolb  ，    

    var url = Window.URL.createObjectURL(_blob); //        

    var a = document.createElement('a');  //    a     
    a.href = url ;
    a.donwload = 'color.png';
    a.textContent = 'Download color.png';   
    body.appendChild(a);
}
fileEle.onchange = function(){ //        
    var file = fileEle.files[0]; //      file,file  Blob   
    reader.readAsArrayBuffer(file); 
}