javascript实现获取指定精度的上传文件的大小简单实例

2023年5月27日上午10:37 • JavaScript

本文将详细讲解如何使用JavaScript来获取指定精度的上传文件大小，并提供两个简单实例。

一、前言

在进行文件上传操作时，我们需要获取所上传文件的大小。但是，通常文件大小的数据单位都是以字节(Byte)，而不是以KB、MB、GB等常用单位显示，这就需要我们在获取文件大小时，对其进行一定的转换和格式化。本文将向大家介绍一种获取文件大小的简单实现方法。

二、获取文件大小的实现方法

我们可以通过File对象获取文件的大小，但是获取到的文件大小为字节(Byte)，需要进一步进行处理。

1. 获取文件大小

通过File对象的size属性来获取文件的大小，获取到的单位为字节(Byte)。

const file = document.getElementById("file-input").files[0];
const size = file.size;

2. 格式化文件大小

一般情况下，我们希望将文件大小转换为人类可读的格式，例如KB、MB、GB等。为此，我们可以定义一个函数来将文件大小转换为我们需要的格式。

function formatSize(size) {
  if (size < 1024) {
    return size + "B";
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + "KB";
  } else if (size < 1024 * 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + "MB";
  } else {
    return (size / 1024 / 1024 / 1024).toFixed(2) + "GB";
  }
}

这个函数接受一个文件大小的参数（单位：字节），并将其转换为KB、MB、GB等格式。利用toFixed()方法保留对应的小数点位数。

三、两个简单实例

1. 实例一：获取上传文件的精确大小

在实例中，我们将使用上述方法来获取上传文件精确的大小，并显示为人类可读的格式。例如，如果上传文件的大小为1048576字节，将其格式化后将显示为1.00MB。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>获取上传文件大小实例</title>
</head>
<body>
  <input type="file" id="file-input" onchange="showFileSize()">
  <div id="file-size"></div>
  <script>
    function showFileSize() {
      const file = document.getElementById("file-input").files[0];
      const size = file.size;
      const fileSize = formatSize(size);
      document.getElementById("file-size").textContent = fileSize;
    }

    function formatSize(size) {
      if (size < 1024) {
        return size + "B";
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        return (size / 1024 / 1024).toFixed(2) + "MB";
      } else {
        return (size / 1024 / 1024 / 1024).toFixed(2) + "GB";
      }
    }
  </script>
</body>
</html>

2. 实例二：设置上传文件大小的上限

下面的示例将演示如何利用上述方法来设置上传文件大小的上限，超出上限的文件将无法上传。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>设置上传文件大小上限实例</title>
</head>
<body>
  <input type="file" id="file-input" onchange="checkFileSize()">
  <script>
    const limitSize = 2 * 1024 * 1024; // 2MB
    function checkFileSize() {
      const file = document.getElementById("file-input").files[0];
      const size = file.size;
      if (size > limitSize) {
        alert("上传文件不能超过2MB！");
        document.getElementById("file-input").value = "";
      }
    }
  </script>
</body>
</html>

在这个示例中，在checkFileSize()函数中，我们通过判断上传文件的大小是否超过2MB来设置上传文件大小的上限。如果文件超过上限，我们将弹出提示信息，并将文件上传框中的内容清空。

至此，您已经了解了如何使用JavaScript获取指定精度的上传文件大小，并了解了两个具有代表性的实例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现获取指定精度的上传文件的大小简单实例 - Python技术站