【html 5】FileReader読み取りファイル
FileReaderオブジェクトを使用すると、Webアプリケーションがユーザーコンピュータに格納されているファイル(または元のデータバッファ)の内容を非同期で読み込み、FileまたはBlobオブジェクトを使用して読み込むファイルまたはデータを指定できます.
ここで、Fileオブジェクトは、ユーザが1つの要素上でファイルを選択して戻ってきたFileListオブジェクトからでもよいし、ドラッグアンドドロップ操作によって生成されたDataTransferオブジェクトからでもよいし、1つのHTML CanvasElement上でmozGetAsFile()メソッドを実行して結果を返すからでもよい.
ツールバーの
FileReader.error ファイルの読み込み中に発生したエラーを示すDOMException.
FileReader.readyState FileReaderのステータスを表す数値.値は次のとおりです.
定数名の値の説明
EMPTY 0はまだデータをロードする.
LOADING 1のデータがロードする.
DONE 2は、全ての読み出し要求を完了する.
FileReader.result ファイルの内容.このプロパティは、読み取り操作が完了した後にのみ有効です.データのフォーマットは、どの方法で読み取り操作を開始するかによって異なります.
イベント処理関数:
FileReader.onabort abortイベントを処理します.このイベントは、読み取り操作が中断されたときにトリガーされます.
FileReader.onerror errorイベントを処理します.このイベントは、読み取り操作にエラーが発生したときにトリガーされます.
FileReader.onload loadイベントを処理します.このイベントは、読み取り操作が完了するとトリガーされます.
FileReader.onloadstart loadstartイベントを処理します.このイベントは、読み込み操作の開始時にトリガーされます.
FileReader.onloadend loadendイベントを処理します.このイベントは、読み取り操作が終了すると(成功するか失敗するか)トリガーされます.
FileReader.onprogress progressイベントを処理します.このイベントはBlobの読み込み時にトリガーされます.
方法:
FileReader.abort() 読み込み操作を中止します.戻るとreadyStateプロパティはDONEになります.
構文:instanceOfFileReader.abort();
この方法はFileReaderの読み取り操作をキャンセルすることができ,トリガ後readyStateは完了(DONE)となる.
FileReader.readAsArrayBuffer() 指定するBlobの内容の読み取りを開始し、終了するとresult属性に保存するのは、読み込まれたファイルのArrayBufferデータオブジェクトとなる.
構文:instanceOfFileReader.readAsArrayBuffer(blob);
FileReaderインタフェースによって提供されるreadAsArrayBuffer()メソッドは、指定されたBlobまたはFileコンテンツの読み取りを開始するために使用されます.読み取りが完了すると、readyStateはDONE(完了)となり、loadendイベントがトリガーされます.resultプロパティには、読み取りファイルのデータを表すArrayBufferオブジェクトが含まれます.
FileReader.readAsBinaryString() 指定したBlobの内容の読み込みを開始します.完了すると、resultプロパティには、読み込まれたファイルの元のバイナリデータが含まれます.
構文:instanceOfFileReader.readAsBinaryString(blob);
readAsBinaryStringメソッドでは、指定したBlobまたはFileオブジェクトが読み込まれます.読み取りが完了すると、readyStateはDONE(完了)になり、loadendイベントがトリガーされます.resultプロパティには、読み込まれたファイルの元のバイナリフォーマットが含まれます.
FileReader.readAsDataURL() 指定したBlobの内容の読み込みを開始します.完了すると、resultプロパティには、読み込まれたファイルの内容を表すdata:URL形式の文字列が含まれます.
構文:instanceOfFileReader.readAsDataURL(blob);
readAsDataURLメソッドでは、指定したBlobまたはFileオブジェクトが読み込まれます.読み取りが完了するとreadyStateは完了したDONEになり、loadendイベントがトリガーされます.resultプロパティには、読み込んだファイルの内容を表すdata:URL形式の文字列(base 64符号化)が含まれます.
FileReader.readAsText() 指定したBlobの内容の読み込みを開始します.完了すると、resultプロパティには、読み込まれたファイルの内容を表す文字列が含まれます.
構文:instance of FileReader.readAsText(blob[, encoding]);
readAsTextメソッドは、BlobまたはFileオブジェクトを特殊な符号化フォーマットに従ってコンテンツ(文字列形式)に変換することができる.
この方法は非同期であり,すなわち実行が完了した場合にのみ結果が表示され,直接表示が結果がない場合にはundefinedが返される.
すなわち、インスタンスのonloadまたはonloadendをマウントする方法で変換後の結果を処理する必要がある
変換が完了するとreadyStateというパラメータはdoneの完了状態に変換され、event(「loadend」)にマウントされたイベントがトリガーされ、イベントが返すパラメータからのFileReaderが得られる.resultプロパティが変換された結果
使用方法:
FileReaderは、ファイルの内容を非同期で読み取り、結果はイベントコールバックで取得します.次に、ローカルimgファイルの内容を読み取る例を示します.
//
if (typeof (FileReader) !== 'undefined') {
//
let reader = new FileReader();
//
reader.onload = (e: any) => {
this.pdfSrc = e.target.result;
// this.pdfSrc = "http://*.*.*.*:8889/group1/M00/00/6A/G0488.pdf";
};
reader.readAsArrayBuffer($img.files[0]);
}
onprogress、onerror ， 。
fileReader ：
，img src background url ， base64 。
， ， ， 。
FileReader readAsDataURL ， ， 。 ， ， ：
var input = document.getElementById("file"); // input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
// base64
reader.readAsDataURL(file);
reader.onload = function(){
//
document.getElementById("file_img").src = this.result;
}
}
}
：
HTML5 ， XHR2， ， form 。
：
1、 input[type="file"] File
2、 FileReader readAsArrayBuffer File ArrayBuffer
3、 xhr ，
4、 xhr.sendAsBinary ArrayBuffer post body
：
var input = document.getElementById("file"); // input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(){
var binary = this.result;
upload(binary);
}
}
}
//
function upload(binary){
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx/opload");
xhr.overrideMimeType("application/octet-stream");
//
if(xhr.sendAsBinary){
xhr.sendAsBinary(binary);
}else{
xhr.send(binary);
}
//
xhr.onreadystatechange = function(e){
if(xhr.readyState===4){
if(xhr.status===200){
//
}
}
}
}