javascript如何实现文件上传_如何读取和处理用户本地文件？

JavaScript无法直接访问本地文件系统，需通过触发用户选择，利用FileList和FileReader读取文件内容，或用FormData+fetch上传文件；大文件可分片处理，注意安全限制与跨域配置。

JavaScript 本身不能直接访问用户本地文件系统（出于安全限制），但可以通过 <input type="file"> 让用户主动选择文件，然后用 File 和 FileReader API 读取内容，再通过 FormData + fetch 或 XMLHttpRequest 上传到服务器。

如何让用户选择并读取本地文件

核心是监听文件输入框的 change 事件，获取 FileList，再用 FileReader 异步读取：

• 使用 <input type="file" id="fileInput"> 触发选择（可加 multiple、accept 属性限制类型）
• event.target.files 是一个 FileList，每个项是 File 对象（继承自 Blob）
• 用 FileReader 的 readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法读取
• 监听 onload 获取结果，onerror 处理失败

示例（读取文本文件）：

const input = document.getElementById('fileInput');
input.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    document.getElementById('output').textContent = reader.result;
  };
  reader.onerror = () => console.error('读取失败');
  reader.readAsText(file, 'UTF-8');
});

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

标签： javascript java js node.js json node 浏览器 app access 后端 跨域 常见