Javascript如何实现文件上传_如何读取文件内容？

JavaScript无法直接访问本地文件系统，需用户通过选择文件；先用FileReader异步读取内容（如readAsText），再用FormData+fetch上传原始File对象。

JavaScript 本身不能直接访问本地文件系统（出于安全限制），但可以通过用户主动选择文件（如 <input type="file">）来读取其内容，再上传到服务器。整个流程分两步：**读取文件内容**（前端）和**上传文件**（前端发请求）。下面分别说明核心实现方式。

如何用 FileReader 读取文件内容

FileReader 是浏览器内置 API，用于异步读取用户选中的文件内容（文本、二进制等）。它不发送网络请求，只在前端解析文件。

• 监听 input[type="file"] 的 change 事件，获取 event.target.files[0]
• 创建 new FileReader() 实例
• 通过 readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法加载文件
• 在 onload 回调中获取结果：reader.result

示例（读取文本文件）：

const fileInput = document.getElementById('fileInput');
const output = document.getElementById('output');
fileInput.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    output.textContent = reader.result; // 文件文本内容
  };
  reader.readAsText(file, 'UTF-8'); // 指定编码避免乱码
});

如何上传文件（不刷新页面）

读取不是必须的——如果只是上传，可直接用 FormData + fetch 或 XMLHttpRequest 发送原始 File 对象。

立即学习“Java免费学习笔记（深入）”；

标签： javascript java js 前端 json 编码 浏览器 app edge safari 后端 csv str