js里怎么判断文件大小

在JavaScript中判断文件大小的几种方法是：使用File对象、利用FileReader API、结合HTML5 File API。其中，使用File对象是最为直接和常用的方法。下面我们将详细介绍如何利用这几种方法在JavaScript中判断文件大小。

使用File对象

File对象是HTML5提供的新特性之一，可以通过它获取文件的各种属性，包括文件大小。我们可以通过表单元素中的input标签来获取用户选择的文件，并通过File对象的size属性来判断文件大小。下面是具体实现方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Size Checker</title>
</head>
<body>
  <input type="file" id="fileInput">
  <p id="fileSize"></p>
  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file) {
        const fileSize = file.size; // size in bytes
        document.getElementById('fileSize').textContent = `File size: ${fileSize} bytes`;
        // You can also convert bytes to kilobytes or megabytes
        const fileSizeInKB = fileSize / 1024;
        const fileSizeInMB = fileSize / (1024 * 1024);
        console.log(`File size: ${fileSizeInKB.toFixed(2)} KB`);
        console.log(`File size: ${fileSizeInMB.toFixed(2)} MB`);
      }
    });
  </script>
</body>
</html>

一、使用FileReader API

FileReader API 提供了异步读文件的能力，可以读取文件的内容，并通过回调函数获取文件的大小。它适用于需要在客户端读取文件内容的场景。

1、初始化FileReader对象

首先，我们需要初始化一个FileReader对象，并为其添加各种事件监听器，例如onload, onerror等，这些事件可以帮助我们在文件读取成功或失败时执行相应的操作。

const reader = new FileReader();
reader.onload = function(event) {
  console.log("File loaded successfully");
};
reader.onerror = function(event) {
  console.error("File loading error");
};

2、读取文件

接下来，我们可以调用FileReader对象的各种方法来读取文件。例如，我们可以使用readAsText方法来读取文本文件，或者使用readAsDataURL方法来读取图像文件。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    reader.readAsText(file);
    const fileSize = file.size; // size in bytes
    console.log(`File size: ${fileSize} bytes`);
  }
});

二、结合HTML5 File API

HTML5 File API 提供了一组接口，可以让开发者在客户端操作文件，例如读取文件、写入文件等。结合HTML5 File API，我们可以更加灵活地操作文件，并获取文件的各种属性。

1、获取文件

首先，我们需要通过input标签获取用户选择的文件，并将其保存到一个变量中。

<input type="file" id="fileInput">

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    console.log(`File name: ${file.name}`);
    console.log(`File size: ${file.size} bytes`);
  }
});

2、显示文件大小

通过File对象的size属性，我们可以获取文件的大小，并将其显示在网页上。

<p id="fileSize"></p>
<script>
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
      const fileSize = file.size; // size in bytes
      document.getElementById('fileSize').textContent = `File size: ${fileSize} bytes`;
      // You can also convert bytes to kilobytes or megabytes
      const fileSizeInKB = fileSize / 1024;
      const fileSizeInMB = fileSize / (1024 * 1024);
      console.log(`File size: ${fileSizeInKB.toFixed(2)} KB`);
      console.log(`File size: ${fileSizeInMB.toFixed(2)} MB`);
    }
  });
</script>

三、文件大小限制及其处理

在实际项目中，我们常常需要对上传的文件大小进行限制，以确保不会占用过多的服务器资源或带宽。我们可以在文件选择事件中添加文件大小的判断逻辑，并在文件超出限制时给出提示。

1、设置文件大小限制

我们可以通过JavaScript代码设置文件大小的限制，例如限制文件大小不得超过2MB。

const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
    } else {
      const fileSize = file.size; // size in bytes
      document.getElementById('fileSize').textContent = `File size: ${fileSize} bytes`;
      // You can also convert bytes to kilobytes or megabytes
      const fileSizeInKB = fileSize / 1024;
      const fileSizeInMB = fileSize / (1024 * 1024);
      console.log(`File size: ${fileSizeInKB.toFixed(2)} KB`);
      console.log(`File size: ${fileSizeInMB.toFixed(2)} MB`);
    }
  }
});

2、用户提示

当文件大小超出限制时，我们需要给用户提示信息，让他们知道文件上传失败的原因。我们可以使用alert框、提示信息或者其他UI组件来实现这一功能。

const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
      document.getElementById('fileSize').textContent = "";
    } else {
      const fileSize = file.size; // size in bytes
      document.getElementById('fileSize').textContent = `File size: ${fileSize} bytes`;
      // You can also convert bytes to kilobytes or megabytes
      const fileSizeInKB = fileSize / 1024;
      const fileSizeInMB = fileSize / (1024 * 1024);
      console.log(`File size: ${fileSizeInKB.toFixed(2)} KB`);
      console.log(`File size: ${fileSizeInMB.toFixed(2)} MB`);
    }
  }
});

四、文件类型判断及处理

除了文件大小外，我们还需要对文件类型进行判断，以确保用户上传的文件符合要求。例如，我们可以限制用户只能上传图片文件（jpeg、png等）。

1、设置文件类型限制

我们可以通过JavaScript代码设置文件类型的限制，并在文件选择事件中进行判断。如果文件类型不符合要求，则给出提示信息。

const ALLOWED_FILE_TYPES = ["image/jpeg", "image/png"];
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (!ALLOWED_FILE_TYPES.includes(file.type)) {
      alert("Invalid file type. Please upload a jpeg or png image.");
      document.getElementById('fileSize').textContent = "";
    } else if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
      document.getElementById('fileSize').textContent = "";
    } else {
      const fileSize = file.size; // size in bytes
      document.getElementById('fileSize').textContent = `File size: ${fileSize} bytes`;
      // You can also convert bytes to kilobytes or megabytes
      const fileSizeInKB = fileSize / 1024;
      const fileSizeInMB = fileSize / (1024 * 1024);
      console.log(`File size: ${fileSizeInKB.toFixed(2)} KB`);
      console.log(`File size: ${fileSizeInMB.toFixed(2)} MB`);
    }
  }
});

五、文件上传及其处理

在实际项目中，我们不仅需要判断文件的大小和类型，还需要将文件上传到服务器。我们可以使用XMLHttpRequest、Fetch API或者第三方库（如Axios）来实现文件上传功能。

1、使用XMLHttpRequest上传文件

XMLHttpRequest是JavaScript中用于与服务器进行交互的对象。我们可以通过它来上传文件，并在上传成功或失败时执行相应的操作。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (!ALLOWED_FILE_TYPES.includes(file.type)) {
      alert("Invalid file type. Please upload a jpeg or png image.");
    } else if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
    } else {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/upload", true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          console.log("File uploaded successfully");
        } else {
          console.error("File upload failed");
        }
      };
      xhr.onerror = function() {
        console.error("File upload error");
      };
      const formData = new FormData();
      formData.append("file", file);
      xhr.send(formData);
    }
  }
});

2、使用Fetch API上传文件

Fetch API是现代浏览器中提供的一种更加灵活和方便的方式，用于与服务器进行交互。我们可以通过它来上传文件，并在上传成功或失败时执行相应的操作。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (!ALLOWED_FILE_TYPES.includes(file.type)) {
      alert("Invalid file type. Please upload a jpeg or png image.");
    } else if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
    } else {
      const formData = new FormData();
      formData.append("file", file);
      fetch("/upload", {
        method: "POST",
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log("File uploaded successfully", data);
      })
      .catch(error => {
        console.error("File upload error", error);
      });
    }
  }
});

六、错误处理及用户体验优化

在文件上传过程中，可能会出现各种错误，例如网络错误、服务器错误等。我们需要对这些错误进行处理，并给出用户友好的提示信息。此外，我们还可以通过进度条、加载动画等方式优化用户体验。

1、错误处理

我们可以通过XMLHttpRequest或Fetch API的错误处理机制，对文件上传过程中的各种错误进行处理。例如，当文件上传失败时，我们可以给用户提示信息，并记录错误日志。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    if (!ALLOWED_FILE_TYPES.includes(file.type)) {
      alert("Invalid file type. Please upload a jpeg or png image.");
    } else if (file.size > MAX_FILE_SIZE) {
      alert("File size exceeds the maximum limit of 2MB");
    } else {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/upload", true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          console.log("File uploaded successfully");
        } else {
          console.error("File upload failed", xhr.statusText);
          alert("File upload failed. Please try again.");
        }
      };
      xhr.onerror = function() {
        console.error("File upload error");
        alert("File upload error. Please check your network connection and try again.");
      };
      const formData = new FormData();
      formData.append("file", file);
      xhr.send(formData);
    }
  }
});

2、用户体验优化

我们可以通过进度条、加载动画等方式优化文件上传过程中的用户体验。例如，当文件正在上传时，我们可以显示一个进度条，告知用户上传进度。

<input type="file" id="fileInput">
<progress id="uploadProgress" value="0" max="100" style="display:none;"></progress>
<p id="fileSize"></p>
<script>
  const fileInput = document.getElementById('fileInput');
  const uploadProgress = document.getElementById('uploadProgress');
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
      if (!ALLOWED_FILE_TYPES.includes(file.type)) {
        alert("Invalid file type. Please upload a jpeg or png image.");
      } else if (file.size > MAX_FILE_SIZE) {
        alert("File size exceeds the maximum limit of 2MB");
      } else {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload", true);
        xhr.upload.onprogress = function(event) {
          if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            uploadProgress.value = percentComplete;
            uploadProgress.style.display = 'block';
          }
        };
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log("File uploaded successfully");
            uploadProgress.style.display = 'none';
          } else {
            console.error("File upload failed", xhr.statusText);
            alert("File upload failed. Please try again.");
            uploadProgress.style.display = 'none';
          }
        };
        xhr.onerror = function() {
          console.error("File upload error");
          alert("File upload error. Please check your network connection and try again.");
          uploadProgress.style.display = 'none';
        };
        const formData = new FormData();
        formData.append("file", file);
        xhr.send(formData);
      }
    }
  });
</script>

通过以上几种方法，我们可以在JavaScript中判断文件大小，并对文件上传过程中的各种情况进行处理。通过合理的错误处理和用户体验优化，我们可以确保文件上传过程顺利进行，并提供用户友好的操作体验。