当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript文件上传与读取教程

JavaScript文件上传与读取教程

2026-02-01 20:50:35 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript文件上传与读取方法详解》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

JavaScript无法直接访问本地文件系统，上传必须通过<input type="file">触发用户选择，再用FileReader读取或fetch+FormData上传；大文件需分片处理，后端负责合并与校验。

javascript如何实现文件上传_如何读取文件内容【教程】

JavaScript 本身不能直接访问本地文件系统，所以所谓“上传”必须通过 <input type="file"> 触发用户主动选择，再用 FileReader 或 fetch 配合后端接口完成——没有后端，文件就只停留在浏览器内存里。

用 `FileReader` 读取文件内容（文本/二进制）

这是最常用的前端读取方式，适用于小到中等体积文件（

常见错误：直接读 event.target.files[0] 的 content 属性（不存在）；或在 onload 外访问 reader.result（还没加载完）。

readAsText(file, encoding)：适合 .txt、.json、.csv 等纯文本，第二参数默认 "UTF-8"
readAsDataURL(file)：返回 base64 字符串，适合预览图片，但体积膨胀 ~33%，别用于大图
readAsArrayBuffer(file)：适合后续做二进制处理（如解析 Excel、音频头信息），需配合 Uint8Array 或 TextDecoder

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result); // 文本内容或 base64 字符串
  };
  reader.onerror = () => {
    console.error('读取失败:', reader.error);
  };
  reader.readAsText(file);
});

用 `fetch` + `FormData` 实现真正上传

读取只是第一步，上传必须把文件交给服务器。这里不能传原始字符串或 base64，而要用 FormData 构造符合 multipart/form-data 规范的请求体。

容易踩的坑：fetch 默认不带 cookie，登录态丢失；没设 Content-Type 却手动设置了——FormData 会自动生成带 boundary 的 header，手动设反而会出错。

后端接口必须支持 multipart/form-data 解析（如 Express 需 multer，Python Flask 需 request.files）
FormData.append('file', file) 中第一个参数是字段名，要和后端约定一致（常见为 file 或 upload）
可追加其他字段：formData.append('name', 'report.pdf')，后端能一并接收

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      // 不要加 headers: { 'Content-Type': '...'' }
    });
    const data = await res.json();
    console.log('上传成功:', data);
  } catch (err) {
    console.error('上传失败:', err);
  }
};