javascript如何操作文件_如何实现文件上传预览

---

JavaScript无法直接读写本地文件系统，需通过File API和FormData实现用户触发的文件上传与预览：用获取File对象，URL.createObjectURL()预览图片，FileReader读取文本，FormData配合fetch上传至服务端。

JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过浏览器提供的 File API 和 FormData 等接口，实现用户主动选择文件后的上传与预览功能。核心在于“用户触发 + 浏览器沙箱内操作”，不涉及服务端逻辑，但需前后端配合完成真正上传。

文件选择与基础信息获取

使用 让用户选择文件，通过 change 事件拿到 FileList 对象：

示例：

@@##@@

图片文件上传前预览（无需发请求）

对图片类文件，可用 URL.createObjectURL() 创建临时内存 URL，快速显示在 中：

• 该 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）可读取内容并展示在 或

 中；PDF 可嵌入