FileReader API可实现前端文件预览，通过readAsDataURL读取图片并显示在img标签中，或用readAsText读取文本内容展示在页面上，结合input的accept和multiple属性支持单或多文件预览，利用onload事件获取结果，根据file.type判断MIME类型选择读取方式，提升兼容性与用户体验。
在现代Web开发中，前端文件预览是一个常见需求，比如上传图片前查看缩略图、读取文本文件内容等。借助 FileReader API，我们可以在不上传文件到服务器的情况下，在浏览器本地完成文件的读取与预览，提升用户体验。
理解 FileReader API
FileReader 是浏览器提供的用于异步读取用户本地文件内容的接口，常配合 input[type="file"] 使用。它支持多种文件格式读取，主要方法包括：
- readAsText(file)：将文件读取为文本字符串
- readAsDataURL(file)：将文件读取为 base64 编码的 Data URL（适合图片预览）
- readAsBinaryString(file)：读取二进制字符串（较少使用）
- readAsArrayBuffer(file)：读取为 ArrayBuffer（适用于音频、视频等复杂文件）
常用事件有 onload、onerror 和 onprogress，其中 onload 在读取成功后触发，result 属性保存结果。
实现图片文件预览
最常见的场景是选择图片后立即预览。通过 readAsDataURL 将图片转为 Data URL，并赋值给 <img> 标签的 src 属性即可显示。
立即学习“Java免费学习笔记（深入）”；
<input type="file" id="fileInput" accept="image/*" />
<img id="preview" src="" alt="预览图" style="max-width: 300px; margin-top: 10px;" />
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('preview').src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
注意：accept="image/*" 可限制只选择图片文件，提升用户体验。
预览文本文件内容
除了图片，你也可以读取 .txt、.json 等文本类文件内容并展示在页面上。
<input type="file" id="textFileInput" accept=".txt,.json" />
<pre id="textContent" style="margin-top: 10px;"></pre>
<script>
document.getElementById('textFileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('textContent').textContent = event.target.result;
};
reader.onerror = function() {
document.getElementById('textContent').textContent = '读取文件出错';
};
reader.readAsText(file);
});
</script>
readAsText 默认以 UTF-8 编码读取，适用于大多数文本文件。
多文件预览与类型判断
如果需要支持多选文件预览，可以结合 multiple 属性和遍历文件列表实现。同时根据文件类型决定读取方式。
<input type="file" id="multiFile" multiple accept="image/*, .txt" />
<div id="previewContainer"></div>
<script>
document.getElementById('multiFile').addEventListener('change', function(e) {
const files = e.target.files;
const container = document.getElementById('previewContainer');
container.innerHTML = ''; // 清空之前的预览
Array.from(files).forEach(file => {
const reader = new FileReader();
reader.onload = function(event) {
let element;
if (file.type.startsWith('image/')) {
element = document.createElement('img');
element.src = event.target.result;
element.style.maxWidth = '200px';
element.style.margin = '5px';
} else {
element = document.createElement('pre');
element.textContent = event.target.result;
}
container.appendChild(element);
};
if (file.type.startsWith('image/')) {
reader.readAsDataURL(file);
} else {
reader.readAsText(file);
}
});
});
</script>
通过 file.type 判断文件 MIME 类型，动态选择读取方式，增强兼容性。
基本上就这些。FileReader API 简单高效，是实现前端文件预览的核心工具。只要注意文件大小限制和错误处理，就能在大多数现代浏览器中稳定运行。
