FileReader
注意：此功能在 Web Workers 中可用。
FileReader 接口允许 Web 应用程序使用 File 或 Blob 对象来指定要读取的文件或数据，从而异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。
File 对象可以从用户使用 <input type="file"> 元素选择文件后返回的 FileList 对象获得，或者从拖放操作的 DataTransfer 对象获得。FileReader 只能访问用户明确选择的文件内容；它不能通过文件路径从用户的文件系统中读取文件。要通过文件路径读取客户端的文件系统中的文件，请使用 文件系统访问 API。要读取服务器端文件，请使用 fetch()，并在读取跨域内容时需要 CORS 权限。
构造函数
FileReader()-
返回一个新的
FileReader对象。
有关详细信息和示例，请参阅 使用 Web 应用程序中的文件。
实例属性
FileReader.error只读-
一个
DOMException，表示读取文件时发生的错误。 FileReader.readyState只读-
一个指示
FileReader状态的数字。该数字是以下值之一：名称 值 描述 EMPTY0尚未加载任何数据。 LOADING1当前正在加载数据。 DONE2整个读取请求已完成。 FileReader.result只读-
文件的内容。此属性仅在读取操作完成后才有效，数据的格式取决于用于启动读取操作的方法。
实例方法
FileReader.abort()-
中止读取操作。返回时，
readyState将为DONE。 FileReader.readAsArrayBuffer()-
开始读取指定的
Blob的内容，完成后，result属性将包含一个代表文件数据的ArrayBuffer。 FileReader.readAsBinaryString()已弃用-
开始读取指定的
Blob的内容，完成后，result属性将包含文件中的原始二进制数据作为字符串。 FileReader.readAsDataURL()-
开始读取指定的
Blob的内容，完成后，result属性将包含代表文件数据的data:URL。 FileReader.readAsText()-
开始读取指定的
Blob的内容，完成后，result属性将包含文件内容作为文本字符串。可以指定一个可选的编码名称。
事件
使用 addEventListener() 或通过将事件监听器分配给此接口的 oneventname 属性来监听这些事件。当 FileReader 不再使用时，使用 removeEventListener() 移除事件监听器，以避免内存泄漏。
示例
使用 FileReader
此示例直接在浏览器中读取并显示文本文件的内容。
HTML
<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>
JavaScript
const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");
fileInput.addEventListener("change", handleFileSelection);
function handleFileSelection(event) {
const file = event.target.files[0];
fileContentDisplay.textContent = ""; // Clear previous file content
messageDisplay.textContent = ""; // Clear previous messages
// Validate file existence and type
if (!file) {
showMessage("No file selected. Please choose a file.", "error");
return;
}
if (!file.type.startsWith("text")) {
showMessage("Unsupported file type. Please select a text file.", "error");
return;
}
// Read the file
const reader = new FileReader();
reader.onload = () => {
fileContentDisplay.textContent = reader.result;
};
reader.onerror = () => {
showMessage("Error reading the file. Please try again.", "error");
};
reader.readAsText(file);
}
// Displays a message to the user
function showMessage(message, type) {
messageDisplay.textContent = message;
messageDisplay.style.color = type === "error" ? "red" : "green";
}
结果
规范
| 规范 |
|---|
| File API # APIASynch |
浏览器兼容性
加载中…