如何使用FileReader API实现前端文件读取功能

在前端开发中，用户上传文件后读取文件内容是非常常见的需求，比如上传图片预览、读取文本文件内容、解析CSV数据等场景，都可以使用浏览器原生的FileReader API来实现，不需要引入额外的第三方库，兼容主流的现代浏览器。

FileReader API核心方法

FileReader提供了多个用于读取不同类型文件的方法，开发者可以根据需要读取的文件类型选择合适的方法，常用方法如下：

• readAsText(file, encoding)：以文本形式读取文件内容，encoding可选，默认是UTF-8，适合读取txt、csv、json等文本类文件
• readAsDataURL(file)：将文件读取为Data URL格式的字符串，适合读取图片、视频等二进制文件，可直接作为src属性值使用
• readAsArrayBuffer(file)：将文件读取为ArrayBuffer对象，适合处理二进制数据，比如解析音频、视频文件的原始数据
• readAsBinaryString(file)：将文件读取为二进制字符串，该方法已逐渐被readAsArrayBuffer替代，部分新浏览器可能不再支持

FileReader事件回调

FileReader在读取文件的过程中会触发多个事件，开发者可以通过监听这些事件来处理读取的不同阶段：

• onload：文件读取成功完成时触发，事件对象的result属性可以获取到读取到的文件内容
• onerror：文件读取失败时触发，可以通过事件对象的error属性获取错误信息
• onprogress：文件读取过程中触发，可以用来实现读取进度条功能，事件对象的loaded和total属性分别表示已读取字节数和总字节数
• onabort：文件读取被中断时触发，比如调用了abort()方法

完整使用示例

1. 文本文件读取示例

下面的代码实现了用户选择文本文件后，在页面上展示文件内容的功能：

// 获取文件输入框元素
const fileInput = document.getElementById('textFileInput');
// 监听文件选择变化事件
fileInput.addEventListener('change', function(e) {
    // 获取用户选择的第一个文件
    const file = e.target.files[0];
    // 如果没有选择文件，直接返回
    if (!file) return;
    // 创建FileReader实例
    const reader = new FileReader();
    // 监听读取成功事件
    reader.onload = function(event) {
        // 获取读取到的文本内容
        const textContent = event.target.result;
        // 将内容展示到页面
        document.getElementById('textContent').innerText = textContent;
    };
    // 监听读取错误事件
    reader.onerror = function() {
        console.error('文件读取失败');
    };
    // 以文本形式读取文件
    reader.readAsText(file, 'UTF-8');
});

2. 图片文件预览示例

下面的代码实现了用户选择图片后，直接在页面预览图片的功能：

// 获取文件输入框和图片预览元素
const imgFileInput = document.getElementById('imgFileInput');
const previewImg = document.getElementById('previewImg');
// 监听文件选择变化事件
imgFileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    // 校验文件类型是否为图片
    if (!file.type.startsWith('image/')) {
        alert('请选择图片文件');
        return;
    }
    const reader = new FileReader();
    reader.onload = function(event) {
        // 将读取到的Data URL赋值给img的src属性
        previewImg.src = event.target.result;
    };
    reader.onerror = function() {
        console.error('图片读取失败');
    };
    // 以Data URL形式读取文件
    reader.readAsDataURL(file);
});

3. 读取进度展示示例

下面的代码实现了大文件读取时的进度展示功能：

const bigFileInput = document.getElementById('bigFileInput');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');

bigFileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    // 监听读取进度事件
    reader.onprogress = function(event) {
        if (event.lengthComputable) {
            // 计算读取进度百分比
            const percent = Math.round((event.loaded / event.total) * 100);
            // 更新进度条和进度文本
            progressBar.style.width = percent + '%';
            progressText.innerText = '读取进度：' + percent + '%';
        }
    };
    reader.onload = function() {
        progressText.innerText = '文件读取完成';
    };
    reader.onerror = function() {
        progressText.innerText = '文件读取失败';
    };
    reader.readAsArrayBuffer(file);
});

注意事项

• FileReader只能读取用户主动选择的文件，不能直接读取用户本地任意路径的文件，这是浏览器的安全限制
• 读取大文件时建议使用readAsArrayBuffer方法，避免占用过多内存，同时可以结合onprogress事件展示读取进度
• 如果不再需要读取文件，可以调用FileReader的abort()方法中断读取过程，释放相关资源
• 部分旧版本浏览器可能不支持FileReader API，使用前可以通过typeof FileReader !== 'undefined'来判断浏览器是否支持该API

FileReader_APIJavaScript前端文件读取文件处理修改时间：2026-06-28 12:00:25