HTML5 FileReader对象

Posted 2023-05-09

参考技术A FileReader实例拥有四个方法，其中三个是用来读取文件，另一个是用来中断读取的。需要注意的是，无论读取成功或是失败，方法并不会返回读取结果，这一结果(储存在result属性中)要用FileReader处理事件去获取；
方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件转化为二进制码
readAsDataURL file 将文件读取为DataURL
readAsText file,[encoding] 将文件读取为文本

该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader 包含了一整套完成的事件模型，用于捕获读取文件时的状态
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成时触发，无论读取成功或失败
onloadstart 读取开始时触发
onprogress 读取中

通过FileReader预览上传图片

通过FileReader预览上传图片

html：采用了layui框架样式，（可自己写）：

js如下:

function getFileContent() {
    /*1.创建文件读取对象*/
    var reader = new FileReader();
    /*2.读取文件，获取DataURL*/
    var file = document.querySelector("#imageUrl").files;
    reader.readAsDataURL(file[0]);
    /*获取数据*/
    reader.onload = function () {
        //console.log(reader.result);
        /*展示*/
        document.querySelector("img").src = reader.result;
    }
    reader.onprogress = function (e) {
        var percent = e.loaded / e.total * 100 + "%";
        div.style.width = percent;
    }
}