js中的filereader

FileReader 是 JavaScript 中的一个 API，它允许网页读取用户计算机上的文件内容。这个 API 主要用于在客户端处理文件，比如预览图片、读取文本文件内容等。

基础概念

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

类型

FileReader 提供了几种不同的读取方法，每种方法对应一种数据类型：

readAsArrayBuffer(file)：将文件读取为 ArrayBuffer。
readAsDataURL(file)：将文件读取为 Data URL，常用于图片预览。
readAsText(file[, encoding])：将文件读取为文本，可以指定编码格式。
readAsBinaryString(file)：将文件读取为二进制字符串（不推荐使用，已被废弃）。

应用场景

图片预览：用户在选择图片文件后，可以使用 FileReader 将其读取为 Data URL 并显示在页面上。
文件上传前的校验：可以在文件上传到服务器之前，先在客户端进行格式或内容的校验。
文本文件内容展示：可以直接读取文本文件的内容并显示在网页上。

示例代码

以下是一个简单的示例，展示了如何使用 FileReader 来预览用户选择的图片文件：

<input type="file" id="imageUpload" accept="image/*">
<img id="previewImage" src="" alt="Image Preview">

<script>
document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('previewImage').src = e.target.result;
        };
        reader.readAsDataURL(file); // 读取图片为 Data URL
    }
});
</script>