JavaScript 获取文件大小：三种方法详解及应用场景298

在Web开发中，经常需要处理文件上传、下载等操作。准确获取文件大小是这些操作的基础。JavaScript本身并不直接提供获取本地文件大小的方法，因为出于安全考虑，浏览器限制了JavaScript直接访问本地文件系统。但是，我们可以通过一些技巧和浏览器提供的API来实现这个功能。本文将详细介绍三种常用的方法，并分析它们的适用场景和优缺点。

方法一：利用 File 对象的 `size` 属性

这是最简单直接的方法，适用于处理用户通过 `` 元素选择的文件。当用户选择文件后，该元素的 `files` 属性会包含一个 `FileList` 对象，其中每个元素都是一个 `File` 对象。`File` 对象拥有一个 `size` 属性，直接返回文件大小，单位为字节。

代码示例：```javascript
const fileInput = ('fileInput');
('change', () => {
const file = [0];
if (file) {
const fileSizeInBytes = ;
const fileSizeInKB = fileSizeInBytes / 1024;
const fileSizeInMB = fileSizeInKB / 1024;
(`文件大小：${fileSizeInBytes} bytes, ${(2)} KB, ${(2)} MB`);
}
});
```

这段代码监听文件输入框的 `change` 事件，获取选择的文件，并以字节、KB、MB三种单位显示文件大小。 `toFixed(2)` 用于保留两位小数。

优点：简单易用，直接获取文件大小。

缺点：仅适用于``元素选择的文件，无法获取其他途径获取的文件大小，例如通过网络请求下载的文件。

方法二：使用 FileReader API

`FileReader` API 提供了一种在客户端异步读取文件内容的方法。虽然其主要用途是读取文件内容，但我们可以在读取过程中间接获取文件大小。通过监听 `FileReader` 的 `onload` 事件，我们可以访问 `` 属性，但这方法获取到的文件大小，效率比较低，不建议使用。

代码示例（不推荐）：```javascript
const fileInput = ('fileInput');
('change', () => {
const file = [0];
if (file) {
const reader = new FileReader();
= function(e) {
// 这里无法直接获取文件大小，效率低，不建议使用
("文件读取完成，但此方法不推荐用于获取文件大小");
};
(file); // 读取文件为DataURL
}
});
```

虽然可以使用 `FileReader`，但是直接使用 `` 更高效，`FileReader` 更适合处理文件内容。

方法三：后端服务器配合处理 (最可靠方法)

对于需要获取服务器端文件大小的情况，例如从服务器下载文件，或者服务器上的文件，JavaScript 无法直接访问。这时就需要服务器端配合处理。客户端发送请求到服务器，服务器读取文件大小并返回给客户端。

例如，使用作为服务器端，可以这样获取文件大小：```javascript
// ()
const fs = require('fs');
const express = require('express');
const app = express();
('/fileSize/:filename', (req, res) => {
const filename = ;
(__dirname + '/uploads/' + filename, (err, stats) => {
if (err) {
(500).send('Error getting file size');
} else {
({ size: });
}
});
});
(3000, () => ('Server listening on port 3000'));
```

客户端可以使用 `fetch` 或 `XMLHttpRequest` 发送请求到服务器获取文件大小：```javascript
fetch('/fileSize/')
.then(response => ())
.then(data => (`文件大小：${} bytes`))
.catch(error => ('Error:', error));
```

优点：可靠性高，适用于各种文件获取场景。

缺点：需要服务器端配合，增加开发复杂度。

总结：选择哪种方法取决于具体的应用场景。对于客户端通过``选择的文件，直接使用 `File` 对象的 `size` 属性是最简单高效的方法。对于需要获取服务器端文件大小的情况，则必须依赖服务器端配合处理。 `FileReader` 虽然可以读取文件，但不推荐用于获取文件大小，因为它增加了不必要的开销。

2025-04-11

上一篇：JavaScript手机号验证：正则表达式及最佳实践

下一篇：JavaScript MVC框架深度解析：从经典到现代的选择