登录
首页 >  文章 >  前端

JavaScript如何实现文件上传与预览

时间：2026-01-14 20:28:04 114浏览 收藏

今天golang学习网给大家带来了《javascript如何实现文件上传_如何读取和预览上传的文件》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

FileReader是读取文件内容的唯一标准API，需通过onload回调获取结果；URL.createObjectURL()适合轻量预览但须手动revoke防内存泄漏；文件校验应结合type与size而非仅依赖后缀。

javascript如何实现文件上传_如何读取和预览上传的文件

用 FileReader 读取上传的文件内容

用户选择文件后，<input type="file"> 元素的 files 属性会返回一个 FileList，其中每个项都是 File 对象（继承自 Blob）。要读取内容，必须用 FileReader，不能直接读取 File 实例。

常见错误是试图用 JSON.parse(file) 或 file.text()（未等 Promise）——File 没有同步读取方法，text() 是 Blob 的异步方法，但需注意浏览器兼容性（如 Safari 16.4+ 才稳定支持）。

  • FileReader.readAsText(file)：适合文本文件（.txt、.json、.csv），可指定编码（如 utf-8）
  • FileReader.readAsDataURL(file)：适合生成预览（图片、PDF），结果是 base64 字符串，注意大文件会导致内存压力
  • FileReader.readAsArrayBuffer(file)：适合二进制处理（如音频分析、加密校验）
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
<p>const reader = new FileReader();
reader.onload = () => {
console.log('文件内容：', reader.result); // text 或 data URL
};
reader.onerror = () => {
console.error('读取失败：', reader.error);
};
reader.readAsText(file, 'utf-8'); // 显式指定编码防乱码
});</p>

用 URL.createObjectURL() 快速预览图片或 PDF

如果只是显示缩略图或内嵌预览，FileReader.readAsDataURL() 不是最佳选择：base64 数据体积比原始文件大 33%，且无法被浏览器缓存。更轻量的方式是创建临时对象 URL。

注意：createObjectURL() 返回的是生命周期绑定到当前文档的 URL，页面刷新或导航后自动失效；必须手动调用 URL.revokeObjectURL() 释放内存，否则可能造成内存泄漏（尤其在频繁选图场景）。

  • 仅适用于可被 、