Chrome读取本地文件完全指南

概述

Chrome浏览器提供了多种方式让Web应用读取本地文件，从传统的文件输入到现代的文件系统访问API。这些技术为Web应用带来了接近原生应用的文件处理能力。

提示： 出于安全考虑，浏览器限制了Web应用直接访问本地文件系统。所有文件操作都需要用户主动授权。

主要技术方案

FileReader API - 最常用的文件读取方式
File System Access API - Chrome 86+ 的新特性
拖拽API - 提供更好的用户体验
Clipboard API - 读取剪贴板中的文件

FileReader API

FileReader API是最基础也是最广泛支持的文件读取方式，它允许Web应用异步读取存储在用户计算机上的文件内容。

基本用法

const fileInput = document.getElementById('fileInput');
const reader = new FileReader();

fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
        reader.readAsText(file);
    }
});

reader.onload = (e) => {
    console.log('文件内容:', e.target.result);
};

reader.onerror = (e) => {
    console.error('读取错误:', e.target.error);
};

读取方法对比

方法	用途	返回类型
readAsText()	读取文本文件	string
readAsDataURL()	读取为Base64	string
readAsArrayBuffer()	读取二进制数据	ArrayBuffer
readAsBinaryString()	读取二进制字符串	string

File System Access API

File System Access API是Chrome 86+引入的新特性，它提供了更强大的文件系统访问能力，允许Web应用直接读写本地文件。

注意： File System Access API目前仅在基于Chromium的浏览器中支持，且需要HTTPS环境。

打开文件

async function openFile() {
    try {
        const [fileHandle] = await window.showOpenFilePicker();
        const file = await fileHandle.getFile();
        const contents = await file.text();
        console.log('文件内容:', contents);
    } catch (err) {
        console.error('打开文件失败:', err);
    }
}

保存文件

async function saveFile(content) {
    try {
        const fileHandle = await window.showSaveFilePicker();
        const writable = await fileHandle.createWritable();
        await writable.write(content);
        await writable.close();
        console.log('文件保存成功');
    } catch (err) {
        console.error('保存文件失败:', err);
    }
}

拖拽上传

拖拽API提供了更直观的文件上传方式，用户可以直接将文件拖拽到页面指定区域。

实现拖拽上传

const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    
    const files = e.dataTransfer.files;
    handleFiles(files);
});

function handleFiles(files) {
    Array.from(files).forEach(file => {
        console.log('文件名:', file.name);
        console.log('文件大小:', file.size);
        console.log('文件类型:', file.type);
    });
}

安全考虑

在处理本地文件时，必须考虑以下安全因素：

始终验证文件类型和大小
不要执行用户上传的脚本文件
使用CSP策略限制资源加载
对敏感操作进行二次确认
及时释放文件资源

文件类型验证

function validateFile(file) {
    const allowedTypes = ['image/jpeg', 'image/png', 'text/plain'];
    const maxSize = 5 * 1024 * 1024; // 5MB
    
    if (!allowedTypes.includes(file.type)) {
        throw new Error('不支持的文件类型');
    }
    
    if (file.size > maxSize) {
        throw new Error('文件大小超过限制');
    }
    
    return true;
}

在线演示

试试下面的演示，体验Chrome读取本地文件的功能：

方法一：点击选择文件

选择文件

方法二：拖拽文件到此处

将文件拖拽到这里

支持 .txt, .json, .csv 文件

文件内容预览：

等待选择文件...