使用File API可实现文件读取与上传，通过input选择文件，FileReader读取内容并预览；2. 支持图片预览、多文件处理及FormData异步上传。
HTML5 提供了强大的 File API，使得网页可以直接读取用户本地文件内容，无需依赖 Flash 或其他插件。通过 File API 配合表单元素，可以实现现代化的文件上传功能，包括实时预览、进度显示和多文件处理等。
1. 基本文件选择与读取
使用 <input type="file"> 可以让用户选择文件，再结合 JavaScript 中的 FileReader 对象读取文件内容。
示例代码：<input type="file" id="fileInput" />
<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) {
console.log('文件内容：', event.target.result);
};
reader.readAsText(file); // 以文本形式读取
});
</script>
上述代码中，files 是一个类数组对象，包含用户选择的文件。调用 readAsText() 可读取文本文件（如 .txt、.json）。若要读取图片并预览，可使用 readAsDataURL()。
2. 图片上传预览实现
常见需求是上传图片前先预览。利用 FileReader 读取图片为 Data URL，赋值给 <img> 标签即可。
立即学习“前端免费学习笔记（深入）”；
示例代码：<input type="file" accept="image/*" id="imageInput" />
<img id="preview" src="" alt="预览" style="max-width: 300px;" />
<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('preview').src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
accept="image/*" 限制只选择图片文件，提升用户体验。
3. 多文件上传与信息展示
添加 multiple 属性支持选择多个文件，并遍历 files 列表进行处理。
示例代码：<input type="file" multiple id="multiFile" />
<ul id="fileList"></ul>
<script>
document.getElementById('multiFile').addEventListener('change', function(e) {
const files = e.target.files;
const list = document.getElementById('fileList');
list.innerHTML = '';
Array.from(files).forEach(file => {
const li = document.createElement('li');
li.textContent = `名称: ${file.name}，大小: ${file.size} 字节，类型: ${file.type}`;
list.appendChild(li);
});
});
</script>
通过遍历 files，可以获取每个文件的 name、size、type 等属性，便于验证或展示。
4. 使用 FormData 实现异步上传
结合 FormData 和 fetch 可将文件发送到服务器。
示例代码：<input type="file" id="uploadFile" />
<button onclick="upload()">上传</button>
<script>
function upload() {
const fileInput = document.getElementById('uploadFile');
const file = fileInput.files[0];
if (!file) {
alert("请选择文件");
return;
}
const formData = new FormData();
formData.append('uploaded_file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功：', data);
})
.catch(error => {
console.error('上传失败：', error);
});
}
</script>
服务器端需配置对应接口接收 multipart/form-data 类型数据。
基本上就这些。File API 让前端能更灵活地处理文件操作，配合现代浏览器特性，可构建出流畅的上传体验。注意兼容性问题在主流浏览器中已基本无碍，但在低版本 IE 中不可用。
