JavaScript中的FileReader示例详解

我很乐意给大家分享一下“JavaScript中的FileReader示例详解”这篇文章的完整攻略。

引言

在Web开发中，常常需要与文件进行交互。例如读取用户上传的文件、将文件保存在客户端等。而JavaScript中的FileReader就为我们处理这些文件提供了便利。本文将详细讲解FileReader的用法及示例。

FileReader简介

FileReader是一种可以读取本地文件的JavaScript API。用于从本地预览或异步读取文件，没有必要上传文件到服务器。FileReader提供以下4种读取文件的方法：

• FileReader.readAsBinaryString(file)：将文件读取为二进制字符串。
• FileReader.readAsDataURL(file)：将文件读取为Data URL。
• FileReader.readAsText(file, [encoding])：将文件读取为文本，可选制定编码。
• FileReader.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。

FileReader使用示例

示例一：读取文本文件并在页面中展示

下面是读取文本文件并在页面中展示的示例代码：

var fileInput = document.getElementById('fileInput');
var output = document.getElementById('output');

fileInput.addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.onload = function() {
        output.textContent = reader.result;
    }
    reader.readAsText(file);
});

此段代码中，我们先通过document.getElementById()方法获取到一个id为fileInput的<input type="file">元素和一个id为output的<div>元素。在input元素中，addEventListener()方法监听了一个change事件。当文件上传后，将会自动触发事件监听器，创建一个文件实例对象并读取数据。

在onload回调函数中，将读取到的文本内容展示在页面上，即将读取结果赋值给output元素的textContent属性。

示例二：读取图片并显示在页面中

下面是读取图片并在页面中显示的示例代码：

var fileInput = document.getElementById('fileInput');
var output = document.getElementById('output');

fileInput.addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.onload = function() {
        output.innerHTML = '<img src="' + reader.result + '">';
    }
    reader.readAsDataURL(file);
});

此段代码与示例一类似，不同之处在于读取到的数据被转换为了Data URL，并将其设置为图片的src属性，这样就能在页面上显示图片了。

结语

以上就是FileReader的用法及示例。希望对大家有所帮助。对于深入学习FileReader还有其他方法的应用（如获取上传文件名称、大小），也请参考官方文档的详细介绍。