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

一、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初始化方法