如何使用JavaScript实现文件上传功能_JavaScript如何读取用户本地文件_网络技术

如何使用JavaScript实现文件上传功能_JavaScript如何读取用户本地文件

发布时间 - 2026-01-07 00:00:00 点击率：次

必须通过用户主动触发的获取File对象，不可脚本自动调起；其files属性返回只读FileList，File继承Blob；读取用FileReader（禁用readAsDataURL处理大文件）；上传用FormData配合fetch；浏览器禁止访问真实路径或本地文件系统。

用 `input[type="file"]` 获取用户选择的文件对象

浏览器中读取本地文件的前提是用户主动触发选择，不能脚本自动调起。必须通过元素，且需用户点击操作（如点击、空格键、回车），否则现代浏览器会静默拒绝。

获取到的不是路径字符串，而是 FileList 对象，里面每个项都是 File 实例（继承自 Blob）：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0]; // 用户选中的第一个文件
  if (!file) return;
  console.log(file.name);     // 文件名
  console.log(file.size);     // 字节数
  console.log(file.type);     // MIME 类型（可能为空）
});

e.target.files 是只读的 FileList，不可修改或赋值
用户取消选择时，e.target.files.length 为 0，不会返回 null
多选需加 multiple 属性，但 iOS Safari 对该属性支持不稳定
file.type 不可靠——浏览器仅根据扩展名或头部推测，可被伪造

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

FileReader 是唯一标准方式，在主线程解析文件内容。它不发送网络请求，纯前端处理，适合预览、校验、转 Base64 等场景。

注意：大文件（如 >100MB）容易导致内存暴涨甚至页面卡死，应避免直接 readAsDataURL；优先用 readAsArrayBuffer 或流式分块读取。

const reader = new FileReader();
reader.onload = (e) => {
  const content = e.target.result; // 根据 read 方法不同，类型可能是 string / ArrayBuffer
  console.log(content);
};
reader.onerror = () => {
  console.error('读取失败：', reader.error?.message);
};
// 可选方法：
// reader.readAsText(file, 'UTF-8');      // 返回字符串
// reader.readAsArrayBuffer(file);        // 返回 ArrayBuffer
// reader.readAsDataURL(file);          // 返回 data:xxx;base64,xxx（慎用！）

每次只能处理一个 File，重复调用 readAs* 会中止前一次操作
onload 回调中，e.target.result 的类型取决于所用的 readAs* 方法
读取二进制内容后，如需转字符串，用 new TextDecoder().decode(arrayBuffer)，别依赖 readAsText 的编码参数（某些浏览器忽略）

用 `FormData` + `fetch` 上传文件到服务器

上传本质是 HTTP POST 请求，把文件作为表单字段发给后端。推荐用 FormData 构造请求体，它能自动设置正确的 Content-Type: multipart/form-data 边界头。

不要手动拼接 multipart 数据，也不要试图把 File 转成 JSON 发送——后端无法解析。

const file = input.files[0];
if (!file) return;

const formData = new FormData();
formData.append('upload', file);           // 字段名 'upload' 需与后端约定
formData.append('meta', JSON.stringify({   // 可附加其他字段
  filename: file.name,
  size: file.size
}));

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要设 headers.Content-Type，浏览器会自动设置
})
.then(r => r.json())
.then(console.log)
.catch(console.error);

FormData.append() 第二个参数可以是 File、Blob 或字符串；第三个参数可指定文件名（覆盖原始 file.name）
若后端要求字段名带数组语法（如 files[]），直接写成 formData.append('files[]', file) 即可
上传进度监听需用 XMLHttpRequest.upload.onprogress，fetch 原生不支持（可用 ReadableStream 分块读取模拟，但复杂度高）

常见错误和绕不过去的限制

很多“读取本地文件”的需求其实混淆了安全边界。浏览器禁止 JS 直接访问任意路径，这是硬性策略，不是 API 缺失。

试图用 fs.readFile 或 require('fs') —— 这是 Node.js API，在浏览器环境根本不存在
用 file:// 协议打开 HTML 页面后读取同目录文件 —— Chrome/Firefox 默认禁用跨源请求，会报 CORS 或 SecurityError
用 URL.createObjectURL(file) 后再 fetch() 该 URL —— 这只是内存引用，不是真实路径，且必须在 revoke 前使用，否则泄漏
期望获得用户硬盘上的绝对路径（如 C:\xxx\yyy.jpg）—— 浏览器永远只返回 C:\fakepath\yyy.jpg 或空字符串，这是隐私保护强制行为

真正需要离线读写本地文件的场景（比如桌面应用），应该用 Electron、Tauri 或 WebKit 的 File System Access API（目前仅 Chromium 支持，且需用户手动授权）。普通网页做不到。

# javascript # java # html # js # 前端 # node.js # json # node # 编码 # 浏览器 # app # 字节

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：centos如何查看mysql日志文件

下一篇：什么是Web Storage_如何在javascript中使

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：centos如何查看mysql日志文件

下一篇：什么是Web Storage_如何在javascript中使