JavaScript FileReader API 完整指南:方法、属性、事件与常见问题处理
本文详细介绍JavaScript中FileReader对象的用法,涵盖readAsText、readAsDataURL等核心方法,以及error、readyState、result等关键属性。同时解析onload、onerror等事件模型,并针对URL路径中空格编码导致的FileNotFoundException提供Java环境下的具体解决方案。
利用FileReader API读取本地文件或Blob对象
FileReader接口用于异步读取存储在用户设备上的文件内容,通过File或Blob对象指定目标,提供读取方法及结果事件模型。
一、FileReader的使用
注意:若需兼容低版本浏览器,需检测FileReader对象是否存在。
if (window.FileReader) {
let reader = new FileReader();
} else {
console.log('你的浏览器不支持读取文件');
}
二、FileReader的方法
| 方法 | 作用 | 参数 | 返回值 |
| abort() | 中止读取操作 | none | none |
| readAsArrayBuffer() | 读取file和Blob内容 | file/blob | result属性中返回ArrayBuffer数据对象的文件内容 |
| readAsBinaryString()[已被W3废弃] | 读取file和Blob内容 | file/blob | result属性中返回原始二进制数据的文件内容 |
| readAsDataURL() | 读取file和Blob内容 | file/blob |
result属性中返回data:URL格式的Base64字符串的文件内容 |
| readAsText() | 读取file和Blob内容 | file/blob | result属性中返回一个字符串的文件内容 |
三、FileReader的属性
FileReader.error(只读):表示读取文件时发生的错误异常FileReader.readyState(只读):表示FileReader当前状态的数值
| 值 | 状态名 | 描述 |
| 0 | EMPTY | 未加载任何数据 |
| 1 | LOADING | 数据加载中 |
| 2 | DONE |
数据加载完毕 |
FileReader.result(只读):文件读取完成后的内容属性,其格式由读取方法决定。
四、FileReader的事件
FileReader.onabort:中止读取操作时触发。FileReader.onerror:读取发生错误时触发。FileReader.onload:读取成功完成时触发。FileReader.onloadstart:读取操作开始时触发。FileReader.onloadend:读取结束时触发(无论成功或失败)。FileReader.onprogress:读取过程中触发。
注意:
1、出于安全限制,FileReader仅能读取由input元素或Ajax获取的文件,不支持直接指定本地路径。
2、FileReader支持在Web Worker环境中使用。
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<input type="file" id="myFile" />
<script type="text/javascript">
if (window.FileReader) {
var reader = new FileReader();
} else {
console.log('你的浏览器不支持读取文件');
}
var myFile = document.querySelector('#myFile');
myFile.onchange = function () {
var file = myFile.files[0];
reader.readAsDataURL(file);
reader.onload = function () {
var data = reader.result; //base64形式的文件内容
};
reader.onerror = function(){
console.log('读取失败');
console.log(reader.error);
}
};
</script>
</body>
</html>
使用FileReader读取本地磁盘文件问题
执行js文件(将js文件置于项目src目录下)
(1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
(3)FileReader fileReader = new FileReader(url.getPath());
运行时
出现:Exception in thread "main" java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (The system cannot find the path specified)
若将url.getPath()替换为"D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js"本地目录路径,则可成功读取文件
url.getPath()返回值为: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js 但无法加载文件
问题源于“%20”,Eclipse WorkSpace间的空格被系统自动编码为%20,导致运行错误
对url.getPath()进行处理,执行url.getPath().substring(1).replace("%20", " "); 将%20替换为空格;问题解决
以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
