HTML5学习笔记——FileReader

最新推荐文章于 2024-05-04 01:19:53 发布

ass_ace

最新推荐文章于 2024-05-04 01:19:53 发布

阅读量399

点赞数 1

分类专栏：前端之html5 文章标签： FileReader 预览本地图片

本文链接：https://blog.csdn.net/baidu_39067385/article/details/90409563

版权

本文介绍HTML5的FileReader接口用于在浏览器中预览本地图片。通过FileReader，可以异步读取文件内容，将图片转化为DataURL显示在页面上，减少前后端交互，提高效率。主要方法包括readAsDataURL、readAsBinaryString等，配合各种事件监听读取状态。

摘要由CSDN通过智能技术生成

我们在实现文件上传的时候，一般会使用input标签，把input的type类型设置为file，这样就可以打开文件窗口选择需要上传的文件，

点击按钮，上传文件后文件有关的信息可以在input.files这个数组中取得，主要包括：

1）name: 文件名；
2）size：文件的大小；
3）type：文件的MIME类型；

以上file对象只获取到了对文件的描述信息，但没有获得文件中的数据。

我们可以通过HTML5提供的FileReader读取到文件中的内容；

FileReader的使用场景

实现在线预览本地图片；
```
一般情况下，我们实现图片上传都会先将图片文件上传到服务器，上传成功后，由后台返回图片的网络地址，再通过图片的地址在前端加载图片显示出来。
```
而通过fileReader可以在浏览器的主线程中异步访问文件系统，将本地图片文件加载到本地内存中，然后赋予某个javaScript变量，接着调用FileReader

的readAsDataURL方法将图片读取成DataURL,从而展示图片。

这样的处理方式我们可以不经过后台，直接将本地图片显示在页面上，减少了前后端频繁交互的过程，减少服务端无用的图片资源。

所以，我们通常可以通过FileReader先预览本地图片效果，确定是想要上传的图片时再调用接口上传到图片服务器。

FileReader的常用方法：

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

1） readAsBinaryString ======> 将文件读取为二进制编码

 readAsBinaryString函数会按字节读取文件内容。

 尽管readAsBinaryString方法可以按字节读取文件，但由于读取后的内容被编码为字符，大小会受到影响，故不适合直接传输，不推荐使用。

 如：测试的图片文件原大小为6764 字节，而通过readAsBinaryString读取后，内容被扩充到10092个字节

2） readAsText ======> 将文件读取为文本

readAsText读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可；

而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用readAsText读取，会产生乱码，同时也不是最理想的读取文件的方式

3） readAsDataURL ======> 将文件读取为DataURL

 文件将会以Base64编码格式输出

4） readAsArrayBuffer ======> 将文件读取为ArrayBuffer对象（一段存放二进制数据的空间）

readAsArrayBuffer方法会按字节读取文件内容，并转换为ArrayBuffer对象。

文件读取后大小，与原文件大小一致。（这是其与readAsBinaryString的区别）

该方法读取文件后，会在内存中创建一个ArrayBuffer对象，将二进制内容放在此对象中，进行网络传输。

abort ======> 中断读取

接口事件

1） onabort 中断

2） onerror 出错

3） onloadstart 开始
1. onprogress 正在读取
5） onload 成功读取
1. onloadend 读取完成时触发，无论读取成功还是失败
FileReader的使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta  name="viewport"  content="width=device-width,initial-scale=1, user-scalable=no">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>test</title>
            <style type="text/css">
                #img{
   
                    width:400px;
                    height:

最低0.47元/天解锁文章

ass_ace

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记——FileReader

title: HTML5之FileReader学习笔记date: 2019-04-29 17:00:05tags:我们在实现文件上传的时候，一般会使用input标签，把input的type类型设置为file，这样就可以打开文件窗口选择需要上传的文件，点击按钮，上传文件后文件有关的信息可以在input.files这个数组中取得，主要包括：1）name: 文件名；2）size：文件的大小...
复制链接

扫一扫

专栏目录