JavaScript无法直接读写本地文件系统，需通过File API和FormData实现用户触发的文件上传与预览：用<input type="file">获取File对象，URL.createObjectURL()预览图片，FileReader读取文本，FormData配合fetch上传至服务端。
JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过浏览器提供的 File API 和 FormData 等接口，实现用户主动选择文件后的上传与预览功能。核心在于“用户触发 + 浏览器沙箱内操作”，不涉及服务端逻辑，但需前后端配合完成真正上传。
文件选择与基础信息获取
使用 <input type="file"> 让用户选择文件，通过 change 事件拿到 FileList 对象：
示例：
<input type="file" id="fileInput" accept="image/*">
<img id="preview" width="200" alt="预览图">
<script>
const input = document.getElementById('fileInput');
const preview = document.getElementById('preview');
input.addEventListener('change', (e) => {
const file = e.target.files[0]; // 获取第一个选中的文件
if (!file) return;
console.log(file.name, file.size, file.type); // 文件名、大小（字节）、MIME 类型
});
</script>
图片文件上传前预览（无需发请求）
对图片类文件，可用 URL.createObjectURL() 创建临时内存 URL，快速显示在 <img> 中：
立即学习“Java免费学习笔记（深入）”；
- 该 URL 仅在当前页面生命周期有效，关闭标签页即失效
- 预览后记得调用
URL.revokeObjectURL()释放内存（尤其多图场景） - 支持 JPG/PNG/GIF/WebP 等常见格式，不依赖后端
补充代码：
if (file && file.type.startsWith('image/')) {
const url = URL.createObjectURL(file);
preview.src = url;
// 清理：在下次选择或页面卸载时释放
preview.onload = () => URL.revokeObjectURL(url);
}
非图片文件的简单预览方式
文本类（如 .txt、.json、.csv）可读取内容并展示在 <textarea> 或 <pre> 中；PDF 可嵌入 <iframe> 或用 PDF.js 渲染：
- 用
FileReader.readAsText()读取文本内容（注意编码，默认 UTF-8） - 用
FileReader.readAsDataURL()获取 base64 字符串（适合小文件，如图标、简历） - 大文件（如 >10MB）建议分片读取或直接上传，避免阻塞主线程
文本预览示例：
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('textPreview').textContent = e.target.result;
};
reader.readAsText(file, 'UTF-8');
上传文件到服务器（含进度与错误处理）
用 FormData 包装文件，配合 fetch 或 XMLHttpRequest 发送：
-
FormData.append('file', file)即可添加单个文件；支持多个同名字段模拟多文件 - 监听
upload.onprogress获取上传进度（XMLHttpRequest更易控制） - 检查响应状态码和 JSON 错误信息，提示用户失败原因（如超限、类型不符）
- 服务端需配置对应接口接收 multipart/form-data 请求
fetch 上传片段：
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(data => console.log('上传成功:', data))
.catch(err => console.error('上传失败:', err)); 
