前端提高篇(七十四)：FileReader文件操作及Blob对象

当上传的文件是png图片时，提交文件：

btn.onclick = function(){

var fileList = file.files;

var len = fileList.length;

// console.log(fileList);

for (var i = 0; i < len; i++){

if (fileList[i].type == ‘image/png’){

//执行上传代码

alert(fileList[i].name + ‘上传成功！’);

}

}

}

已经选择了两个文件，一个png图片，一个txt文件，然后点击提交：

**FileReader对象

负责把文件读入内存，并且读取文件中的数据**

1.读取并显示文件

readAsText() 将文件中的数据读取成文本数据

readAsBinaryString()读取为二进制字符串

readAsDataURL()读取为DataURL字符串

readAsArrayBuffer()读取为一个ArrayBuffer对象

abort()终端读取操作

2.检测读取事件

onabort：数据读取中断时触发

onprogress：数据读取中触发

onerror：数据读取出错时触发

onload：数据读取完成并成功时触发

onloadstart：数据开始读取时触发

onloadend：数据读取完成时触发，不论成功还是失败

btn.onclick = function(){

var fileList = file.files;

var len = fileList.length;

// console.log(fileList);

for (var i = 0; i < len; i++){

if (fileList[i].type == ‘image/png’){

//执行上传代码

alert(fileList[i].name + ‘上传成功！’);

}else if (fileList[i].type == ‘text/plain’){

var reader = new FileReader();

reader.readAsText(fileList[i]);//读取具体内容，此处不能写this，指的是btn

reader.onload = function(){

console.log(reader.result);//读取完成后打印内容

//执行上传操作

}

}

}

}

效果：

如果读取成二进制，中文会乱码

文本内容是：hello 世界

读取成文本：

读取成二进制readAsBinaryString：

readAsDataURL可以用来读取图片，转为base64格式：

btn.onclick = function(){

var fileList = file.files;

var len = fileList.length;

// console.log(fileList);

for (var i = 0; i < len; i++){

if (fileList[i].type == ‘image/png’){

alert(fileList[i].name + ‘上传成功！’);

var reader = new FileReader();

reader.readAsDataURL(fileList[i]);

reader.onload = function(){

console.log(reader.result);

var img = new Image();

img.src = reader.result;

document.body.appendChild(img);//将图片加到dom中

}

}

}

}

获取图片的DataURL，即base64编码，赋给新img，再将img加到dom中：

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】