JavaScript文件操作_FileAPI使用指南-js教程-PHP中文网

JavaScript文件操作_FileAPI使用指南

狼影

发布： 2025-11-28 19:31:02

原创

313人浏览过

答案：JavaScript通过File API在用户授权下读取本地文件。用户选择文件后，通过input元素或拖拽获取File对象，利用FileReader异步读取内容，支持文本、图片预览等场景，需注意安全限制与大文件分片处理。

javascript文件操作_fileapi使用指南

JavaScript本身出于安全考虑，不能直接访问用户设备上的文件系统。但通过现代浏览器提供的File API，网页可以在用户主动授权的前提下读取本地文件内容。这在上传文件、预览图片、解析文档等场景中非常实用。掌握File API的关键在于理解其核心接口和事件机制。

获取文件对象

用户需要通过input元素选择文件后，JavaScript才能获得对应的File对象。最常见的方式是监听input的change事件。

创建一个type为file的input元素，可以限制可选文件类型，比如只允许图片或文本文件。当用户选择文件后，event.target.files会返回一个FileList集合，其中每个成员都是一个File实例，继承自Blob，包含文件名、大小、类型和最后修改时间等信息。

示例代码：

<input type="file" id="fileInput" accept=".txt, image/*">

<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    console.log('文件名:', file.name);
    console.log('大小:', file.size + ' 字节');
    console.log('类型:', file.type);
  }
});
</script>

登录后复制

读取文件内容

要读取文件的实际数据，需使用FileReader对象。它提供异步读取机制，避免阻塞页面。常用方法包括readAsText（读取为字符串）、readAsDataURL（读取为base64编码的URL）、readAsArrayBuffer等。

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

Android开发教程与笔记pdf版

Android文件存取与数据库编程知识，文件操作主要是读文件、写文件、读取静态文件等，同时还介绍了创建添加文件内容并保存，打开文件并显示内容；数据库编程方面主要介绍了SQLite数据库的使用、包括创建、删除、打开数据库、非查询SQL操作指令、查询SQL指令-游标Cursors等知识。

查看详情

FileReader通过onload事件返回结果，读取完成后，event.target.result即为实际内容。

读取文本文件示例：

const reader = new FileReader();
reader.onload = function(e) {
  const content = e.target.result;
  console.log('文件内容:', content);
};
reader.readAsText(file);

登录后复制

预览图片示例：

if (file.type.startsWith('image/')) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result; // data URL
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
}

登录后复制

拖拽上传支持

除了input选择，还可以实现拖拽上传功能。监听dragover和drop事件，从event.dataTransfer.files中获取文件列表。

阻止默认行为是关键，否则浏览器会尝试打开文件。drop事件触发后处理方式与input一致，仍使用FileReader读取。

document.addEventListener('dragover', e => e.preventDefault());
document.addEventListener('drop', e => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (file) handleFile(file);
});

登录后复制

注意事项