JavaScript读取本地文件需通过FileReader异步处理用户选择的文件,无法直接访问任意本地路径;常用readAsText(文本)、readAsDataURL(base64)、readAsArrayBuffer(二进制)等方法,并支持onprogress监听进度。

JavaScript 中读取本地文件主要依靠 FileReader 对象,它允许异步读取用户通过 `` 选择的文件内容。注意:出于安全限制,JS 无法直接读取任意本地路径的文件(比如 C:\xxx.txt),只能处理用户主动选择的文件对象。
获取文件对象
通常从 `` 元素中获取:
使用 FileReader 读取文本文件
function readTextFile(file) {
const reader = new FileReader();
reader.onload = function(e) {
console.log('文件内容:', e.target.result); // 字符串形式
};
reader.onerror = function() {
console.error('读取失败:', reader.error);
};
reader.readAsText(file, 'UTF-8'); // 指定编码,避免中文乱码
}
读取为其他格式
根据需求选择对应方法:
立即学习“Java免费学习笔记(深入)”;
-
readAsDataURL(file):转为 base64 字符串,适合预览图片或上传前处理 -
readAsArrayBuffer(file):读为二进制缓冲区,适合处理音频、视频、Excel 等需底层操作的文件 -
readAsBinaryString(file)(已废弃,不推荐):旧 API,兼容性差,应避免使用
监听读取进度(可选)
对大文件可显示加载状态:
reader.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total * 100).toFixed(1);
console.log(`加载中... ${percent}%`);
}
};基本上就这些。关键点是:必须由用户触发选择文件,不能绕过交互自动读取;读取是异步的,结果在 onload 回调里获取;编码和格式选对,才能正确解析内容。










