使用 FileReader 读取文件
将选中的文件读取为文本或数据 URL。
使用 FileReader 读取文件 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
什么是 FileReader
FileReader 是一种浏览器接口，可以异步读取 File 和 Blob 对象的内容。您可以从 <input type="file"> 获取文件，并将其读取为文本、数据 URL 或二进制数据。
从输入项获取文件
文件输入控件会提供一个 files 列表。第一个选中的文件位于索引 0 处，并具有 name、size 和 type 等有用属性。
const input = document.querySelector('#picker');
const file = input.files[0];
console.log(file.name);
console.log(file.size);
console.log(file.type);读取是异步的
FileReader 不会直接返回数据。您需要附加一个 onload 处理程序，然后调用读取方法。结果稍后会出现在 reader.result 中。
const reader = new FileReader();
reader.onload = function () {
console.log('done reading');
console.log(reader.result);
};
reader.readAsText(file);readAsText
readAsText 会将文件解码为文本字符串，非常适合读取 .txt、.csv 或 JSON 文件。
const reader = new FileReader();
reader.onload = () => {
console.log('contents:', reader.result);
};
reader.readAsText(textFile);readAsDataURL
readAsDataURL 会生成一个 base64 编码的 data: URL。将它赋给 img.src 后，就可以轻松预览图像。
const reader = new FileReader();
reader.onload = () => {
const img = document.querySelector('#preview');
img.src = reader.result;
console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);readAsArrayBuffer
readAsArrayBuffer 会将原始二进制数据作为 ArrayBuffer 返回，适合逐字节解析文件格式。
const reader = new FileReader();
reader.onload = () => {
const bytes = new Uint8Array(reader.result);
console.log('byte count:', bytes.length);
console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);处理错误
附加一个 onerror 处理程序来捕获读取失败的情况，例如文件无法读取时。
const reader = new FileReader();
reader.onerror = () => {
console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);跟踪进度
对于大型文件，onprogress 事件会报告目前已加载的 bytes 数量，这对于制作进度条很有用。
const reader = new FileReader();
reader.onprogress = (event) => {
if (event.lengthComputable) {
const percent = (event.loaded / event.total) * 100;
console.log('loaded ' + percent.toFixed(0) + '%');
}
};
reader.readAsArrayBuffer(bigFile);封装在 Promise 中
基于事件的接口使用起来不够简洁。将它封装在 Promise 中，这样就可以使用 await 编写更清晰的代码。
function readText(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsText(file);
});
}
readText(file).then(text => console.log(text));现代替代方案：file.text()
现代浏览器允许您直接调用 file.text()、file.arrayBuffer() 或 file.stream()，它们会返回 Promise。在许多情况下，这些方法比 FileReader 更简单。
async function show(file) {
const text = await file.text();
console.log(text);
}
show(file);FileReader 为什么重要
借助 FileReader，您可以完全在浏览器中处理用户选中的文件：预览图像、解析 CSV，或在发送前验证上传内容。请根据所需数据选择读取方法：文本、数据 URL 或二进制数据。接下来，您将探索二进制大对象和对象 URL。
const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);快速检查
哪个 FileReader 方法会返回适合图像预览 src 的 base64 字符串？
回顾：读取文件
您已经学会了如何读取文件内容：
- 从
input.files获取文件；通过onload异步读取。 readAsText、readAsDataURL和readAsArrayBuffer会返回不同的格式。- 处理
onerror和onprogress，提高程序的健壮性。 - 现代的
file.text()和file.arrayBuffer()是基于 Promise 的替代方案。
常见问题解答
「使用 FileReader 读取文件」课时是免费的吗？
是的 — 「使用 FileReader 读取文件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「使用 FileReader 读取文件」这节课中我会学到什么？
将选中的文件读取为文本或数据 URL。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 FileReader 读取文件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- FormData 对象
- 使用 FileReader 读取文件
- Blob 与对象 URL
- 使用 Fetch 上传文件