FileReader 文件操作

最新推荐文章于 2024-07-26 08:29:23 发布

爱睡的虫虫

最新推荐文章于 2024-07-26 08:29:23 发布

阅读量2.3k

点赞数 2

分类专栏： HTML5 移动端开发文章标签： fileReader 文件文件操作 file reader

本文链接：https://blog.csdn.net/feifanzhuli/article/details/96132615

版权

移动端开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML5

11 篇文章 0 订阅

订阅专栏

file对象选择文件

fileReader 对象允许Web应用程序异步读取用户计算机上的文件或数据。

html5中，通过添加 multiple属性，在file控件内允许一次性放置多个文件。
语法：

	<input type="file" multiple id="file">

例子：

<input type="file" multiple id="file" onchange="node(this)">
    <script>
        // onchange 在域的内容改变时发生触发。
        function node(e){
            console.log(e.files);
        }
    </script>

html5 中新增的⽂件操作：

File：代表⼀个⽂件对象
FileList：代表⼀个⽂件列表对象，类数组
FileReader：⽤于从⽂件中读取数据
FileWriter：⽤于向⽂件中写出数据

调⽤ fileReader 对象的⽅法

创建一个FileReader对象

 var fReader = new FileReader();

⽅法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将⽂件转化为⼆进制码
readAsDataURL	file	将⽂件读取为 DataURL
readAsText	file,[encoding]	将⽂件读取为⽂本

需要注意的是，⽆论读取成功或是失败，⽅法并不会返回读取结果，这⼀结果(储存在 result 属性中)要⽤ FileReader 处理事件去获取；

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

readAsBinaryString：该⽅法将⽂件读取为⼆进制字符串，通常我们将它传送到后端，后端可以通过这段字
符串存储⽂件。

readAsDataURL：这是例⼦程序中⽤到的⽅法，该⽅法将⽂件读取为⼀段以 data: 开头的字符串，这段字符串的实质就是Data URL，Data URL是⼀种将⼩⽂件直接嵌⼊⽂档的⽅案。这⾥的⼩⽂件通常是指图像与 html等格式的⽂件。

属性

属性	描述
error	在读取文件时发生的错误
readyState	表明FileReader对象的当前状态
result	读取到的文件内容

事件监听函数

FileReader 包含了⼀整套完成的事件模型，⽤于捕获读取⽂件时的状态,下⾯这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	⽂件读取成功完成时触发
onloadend	读取完成时触发，⽆论读取成功或失败
onloadstart	读取开始时触发
onprogress	读取中

实例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
        }
        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 文件上传 input 类型是 file -->
    <!-- multiple 属性，表示可以添加多个文件 -->
    <label for="">
        单图片上传：<input type="file" name="" id="" class="add">
    </label>
    <label for="">
        多文件上传：<input type="file" multiple name="" id="" class="more">
    </label>
    <label for="">
        单个文件上传：<input type="file" name="" id="" class="txt">
    </label>
    <div class="box">
    </div>
    <script>
        var add = document.querySelector(".add");
        var box = document.querySelector(".box");
        var more = document.querySelector(".more");
        var txt = document.querySelector(".txt");
        // 单个文件上传
        add.onchange = function () {
            // 上传的文件
            var fs = this.files[0];
            // 实例化FileReader
            var myReader = new FileReader();
            // readAsDataURL 把文件转为url 
            myReader.readAsDataURL(fs);

            // 文件读取完成时触发
            myReader.onload = function () {
                console.log(myReader.result);
                box.innerHTML = "<img src=" + myReader.result + ">";
            }
        }
        // 多个文件
        more.onchange = function () {
            // 上传的文件
            var fs = [...this.files];

            fs.forEach(function (item) {
                var myReader = new FileReader();
                // readAsDataURL 把文件转为url 
                myReader.readAsDataURL(item);
                // 文件读取完成时触发
                myReader.onload = function () {
                    console.log(myReader.result);
                    box.innerHTML += "<img src=" + myReader.result + ">";
                }
            })
        }
        // 单个 text
        txt.onchange = function () {
            // 上传的文件
            var fs = this.files[0];
            // 实例化FileReader
            var myReader = new FileReader();
            // readAsDataURL 把文件转为url 
            myReader.readAsText(fs);

            // 文件读取完成时触发
            myReader.onload = function () {
                console.log(myReader.result);
                box.innerHTML = "<span>" + myReader.result + "</span>";
            }
        }
    </script>
</body>
</html>