正文

掌握JS获取文件大小：轻松操作，实现文件大小查询与展示

/0 浏览量
1112

在网页开发中，经常需要获取用户上传的文件大小，以便进行一些限制或展示。JavaScript 提供了多种方法来获取文件大小，下面我将详细介绍几种常用的方法，并给出相应的代码示例。

使用 File 对象获取文件大小

在 HTML5 中，可以通过 <input type="file"> 元素让用户选择文件，然后使用 JavaScript 的 File 对象来获取文件的大小。

示例代码

// 假设有一个文件输入元素，id 为 "fileInput"
document.getElementById('fileInput').addEventListener('change', function(e) {
    // 获取选中的文件
    var file = e.target.files[0];

    // 获取文件大小
    var fileSize = file.size;

    // 将文件大小转换为 KB、MB、GB 等单位
    var size = fileSize / 1024;
    var sizeUnit = 'KB';

    if (size > 1024) {
        size = size / 1024;
        sizeUnit = 'MB';
    }

    if (size > 1024) {
        size = size / 1024;
        sizeUnit = 'GB';
    }

    // 展示文件大小
    console.log('文件大小：' + size.toFixed(2) + ' ' + sizeUnit);
});

注意事项

  • file.size 返回的是字节数，可以直接使用。
  • 转换为其他单位时，需要除以相应的数值（1024）。
  • 可以根据需要添加更多的单位转换逻辑。

使用 XMLHttpRequest 获取文件大小

如果需要在不让用户选择文件的情况下获取文件大小，可以使用 XMLHttpRequest。

示例代码

// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL 和异步方式
xhr.open('HEAD', 'path/to/your/file', true);

// 发送请求
xhr.send();

// 请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status == 200) {
        // 获取文件大小
        var fileSize = xhr.getResponseHeader('content-length');

        // 将文件大小转换为 KB、MB、GB 等单位
        var size = fileSize / 1024;
        var sizeUnit = 'KB';

        if (size > 1024) {
            size = size / 1024;
            sizeUnit = 'MB';
        }

        if (size > 1024) {
            size = size / 1024;
            sizeUnit = 'GB';
        }

        // 展示文件大小
        console.log('文件大小：' + size.toFixed(2) + ' ' + sizeUnit);
    }
};

注意事项

  • 使用 HEAD 请求获取资源信息。
  • 使用 getResponseHeader('content-length') 获取文件大小。
  • 注意跨域问题，可能需要服务器端支持。

总结

以上介绍了两种获取文件大小的方法，分别适用于不同的场景。在实际开发中，可以根据需求选择合适的方法。希望这些内容能帮助你轻松实现文件大小查询与展示。

-- 展开阅读全文 --