File & FileReader

在 JavaScript 中，File 和 FileReader 对象是处理文件输入和读取文件内容的重要工具。它们通常用于处理用户通过 <input type="file"> 选择的文件或拖拽到网页上的文件。

File

File 对象继承自 Blob，并扩展了与文件系统相关的属性。当你从 <input> 元素中选择文件时，会返回一个包含 File 对象的列表。

<input type="file" id="fileInput" multiple>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files; // 获取用户选择的文件列表
    for (let i = 0; i < files.length; i++) {
        console.log(`文件名: ${files[i].name}`);
        console.log(`文件类型: ${files[i].type}`);
        console.log(`文件大小: ${files[i].size} bytes`);
        console.log(`最后修改时间: ${new Date(files[i].lastModified)}`);
    }
});
</script>

FileReader

FileReader 接口提供了读取文件的方法。它可以异步地读取文件内容，并将结果以文本、DataURL 或 ArrayBuffer 的形式提供给应用。

常用方法

const reader = new FileReader();

// 读取文件为字符串
readAsText(file, encoding)

// 读取文件为 DataURL 格式
readAsDataURL(file)

// 读取文件为 ArrayBuffer
readAsArrayBuffer(file) 

事件监听器

const reader = new FileReader();
reader.readAsText(file);

// 开始加载时触发
reader.onloadstart = () => {}

// 加载过程中周期性触发
reader.onprogress = () => {}

// 成功读取后触发
reader.onload = () => {}

// 出现错误时触发
reader.onerror = () => {}

// 取消读取时触发
reader.onabort = () => {}

// 无论成功还是失败都会触发
reader.onloadend = () => {}