当前位置：首页 > 行业动态 > 正文

file对象 js

JS File对象用于处理本地文件，继承Blob，支持读取、上传等

File对象的定义与属性

File对象是浏览器端用于表示用户所选文件的接口,通常通过<input type="file">元素或拖放操作获取，它是Blob对象的子类，继承了size、type等基础属性，并新增了文件名、最后修改时间等特性。

属性 类型 描述
name 字符串 文件名（含扩展名）
fullPath 字符串 文件绝对路径（仅限Edge/IE）
size 数字 文件大小（字节）
type 字符串 MIME类型（如image/png）
lastModified 数字 最后修改时间戳（毫秒级）
webkitRelativePath 字符串 文件相对路径（Chrome特有）

获取File对象的方式

  1. 通过文件输入框
    监听<input>元素的change事件，获取用户选择的文件：

    file对象 js 第1张

    const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0]; // 第一个选中的文件
});

  2. 通过拖放操作
    监听drop事件，从DataTransfer对象中提取文件：

    const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('drop', (e) => {
  e.preventDefault(); // 阻止默认行为
  const file = e.dataTransfer.files[0];
});

File对象的常用方法

方法 用途 返回值
slice(start, end) 提取文件片段 新的Blob对象
arrayBuffer() 读取为ArrayBuffer Promise
text() 读取为文本 Promise
stream() 生成文件流（Chrome/Firefox） ReadableStream

示例：读取文本文件内容

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    console.log(reader.result); // 文件内容
  };
});

浏览器与Node.js的差异

特性 浏览器端（File API） Node.js端（fs模块）
获取文件方式 <input>/拖放 fs.readFileSync/fs.promises
文件对象类型 File（继承自Blob） fs.ReadStream/Buffer
适用场景 前端文件上传/预览 服务器文件操作

常见问题与解答

问题1：如何限制用户上传文件的大小？

解答：在文件输入框的change事件中检查file.size属性：

const maxSize = 5  1024  1024; // 5MB
if (file.size > maxSize) {
  alert('文件超过5MB限制！');
}

问题2：为什么FileReader.readAsDataURL会导致内存占用过高？

解答：该方法会将整个文件读入内存并编码为Base64字符串，对于大文件（如数百MB的图片）可能导致崩溃，解决方案：

  1. 使用readAsArrayBuffer或readAsStream分块处理；
  2. 在
File APIjavascript
0

相关文章