JS获取文件大小方法小结

在前端开发中，我们经常需要获取文件的大小信息，例如在文件上传时，需要对上传文件大小进行限制；在文件下载时，需要知道文件的大小，以便在前端进行进度条的展示等。本篇文章将介绍JS中获取文件大小的几种方法。

方法一：通过File对象的size属性获取文件大小

示例代码

function getFileSize(file) {
  return file.size;
}

示例说明

通过input[type=file]选择文件后，可以获取到一个File对象。在该对象中，有一个size属性，即为文件的大小（单位为字节）。

方法二：通过ajax请求获取文件大小

示例代码

function getFileSizeByUrl(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('HEAD', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 304) {
          resolve(xhr.getResponseHeader('Content-Length'));
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.send();
  });
}

示例说明

在该方法中，我们使用XMLHttpRequest发起一个HEAD请求，获取到请求返回的headers信息。其中，Content-Length即为文件的大小（单位为字节）。

方法三：通过Blob、FileReader获取文件大小

示例代码

function getFileSizeByBlob(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function() {
      resolve(this.result.byteLength);
    }
    reader.onerror = function() {
      reject();
    }
    reader.readAsArrayBuffer(file);
  });
}

示例说明

在该方法中，我们先将file对象转化为Blob对象，再通过FileReader对象的API，将Blob对象读取为ArrayBuffer类型的数据。通过ArrayBuffer的byteLength属性，即可获取到文件的大小。

综上，以上三种方法均可以实现获取文件大小的功能，具体使用场景可以根据实际情况进行选择。其中，第一种方法最为简单，适用于已经获取到File对象的情况；第二种方法需要发起一个ajax请求，在网络不稳定或请求失败的情况下会有一定影响；第三种方法通过Blob、FileReader的API操作，可以实现对任意URL或File对象的大小获取，但是需要进行文件读取操作，较为繁琐。