Javascript如何实现文件上传_如何读取文件内容？-js教程-PHP中文网

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

幻影之瞳

发布： 2025-12-18 23:11:02

原创

765人浏览过

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

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

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免费学习笔记（深入）”；

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

查看详情

FormData 可自动处理 multipart/form-data 编码，无需手动构造请求体
将 File 对象 append 进 FormData，键名需与后端约定（如 "file"）
用 fetch 提交，服务端接收该字段即可

示例（上传文件）：

const file = fileInput.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file); // 后端通过 req.file 或 request.files.file 获取
fetch('/upload', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));

读取并上传的常见组合场景

有些需求需要先读取校验（如检查 CSV 格式、JSON 是否合法、图片尺寸），再上传；或读取后生成缩略图、计算哈希等。

先用 FileReader 读取为 ArrayBuffer，做前端校验或预处理
校验通过后，仍可用原 File 对象上传（不用转成 Blob 再传，避免重复内存占用）
若需修改内容（如压缩图片），可用 canvas 或第三方库生成新 Blob，再 append 到 FormData

注意：File 是 Blob 的子类，所以可直接当 Blob 使用；上传时推荐传原始 File，保留文件名和类型信息。

注意事项与兼容性

FileReader 和 FormData 在现代浏览器中支持良好（Chrome 7+、Firefox 4+、Edge 12+、Safari 6.1+）。需注意：

大文件读取可能阻塞主线程（建议用 readAsArrayBuffer + 流式处理或分块）
移动端需注意 accept 属性过滤类型（如 accept="image/*"）提升体验
上传时建议添加 onprogress 监听（XMLHttpRequest.upload.onprogress）或使用 fetch 配合 ReadableStream（较新）显示进度
服务端需配置好文件大小限制、MIME 类型白名单、临时存储路径等

以上就是Javascript如何实现文件上传_如何读取文件内容？的详细内容，更多请关注php中文网其它相关文章！