FileReader 和Blob File文件對象(附formData初始化方法)；

1、FileReader爲讀取文件對象 。

api  地址   相關demo

如今只討論  readAsArrayBuffer,readAsBinaryString,readAsDataURL,readAsText。其餘方法暫時不討論。


1.readAsDataURL(blob)讀取base64數據，供img src屬性使用，不過只適用小體積圖片；大致積圖片仍是使用URL.createObjectURL(blob:Blob)生成一個內存地址使用更方便，須要記得在不適用此內存地址後記得使用URL.revokeObjectURL(url:string)釋放掉；

2.readAsText(blob[, encoding]);第二個參數爲  編碼格式，默認爲「utf-8」;

3.readAsArrayBuffer:與readAsBinaryString相似，readAsArrayBuffer方法會按字節讀取文件內容，並轉換爲ArrayBuffer對象。
咱們能夠關注下文件讀取後大小，與原文件大小一致。

4.readAsBinaryString:按字節讀取文件，但因爲讀取後的內容被編碼爲字符，大小會受到影響，故不適合直接傳輸，也不推薦使用。(w3c亦不推薦使用)，其數據能夠經過xml.sendAsBinary（string） 傳輸到後臺,傳輸以前瀏覽器會對此數據進行解析（w3c已不推薦使用此方式傳輸二進制文件，使用send（）代替）；

5.複製File對象方法

   

var file = new File(["哈哈，傻逼看看爲何要數組"], "aa.txt", {

type: 'text/plain'

});

var file2 = new File([file],"aa2.txt",{

type:'text/plain'

})

console.log(file,file2,file == file2);

var fileReader = new FileReader();

fileReader.onload = function (evt) {

var text = evt.target.result;

console.log(1,text);

}

fileReader.readAsText(file,"utf-8");

var fileReader2 = new FileReader();

fileReader2.onload = function (evt) {

var text = evt.target.result;

console.log(2,text);

}

fileReader2.readAsText(file2,"utf-8");

 6.canvas導出爲file對象canvas.mozGetAsFile(name, type)。兼容性很差，只有火狐支持。。。

7.建立File對象api

附：formData初始化方法