javascript实现限制上传文件大小-前端开发

下面是实现限制上传文件大小的完整攻略。

下面是实现限制上传文件大小的完整攻略。

步骤一：JS获取文件大小

首先，我们需要通过 JavaScript 获取上传的文件大小。可以通过以下代码来实现：

// 选取上传文件的 input 元素
const fileInput = document.querySelector('input[type="file"]');

// 为 input 元素添加事件监听器
fileInput.addEventListener('change', function() {
  // 获取文件对象
  const file = this.files[0];
  // 获取文件大小，单位为字节
  const fileSize = file.size;
  // 打印文件大小
  console.log(fileSize);
});

代码中，我们使用了 querySelector 方法选取了一个上传文件的 input 元素，并为 input 元素添加了 change 事件监听器。当用户选择文件后，事件监听器会获取文件对象，进而获取文件大小，并在控制台中打印出来。

步骤二：限制文件大小

有了获取文件大小的代码，我们就可以在上传文件前对文件大小进行限制了。可以使用以下代码实现：

// 选取上传文件的 input 元素
const fileInput = document.querySelector('input[type="file"]');

// 设置文件大小限制为 1MB
const maxSize = 1024 * 1024;

// 为 input 元素添加事件监听器
fileInput.addEventListener('change', function() {
  // 获取文件对象
  const file = this.files[0];
  // 获取文件大小，单位为字节
  const fileSize = file.size;

  // 如果文件大小超过了限制
  if (fileSize > maxSize) {
    alert('文件大小超过了限制'); // 提示用户文件大小超过了限制
    this.value = ''; // 重置文件选择框
  }
});

代码中，我们首先设置了文件大小的限制为 1MB，然后在 change 事件监听器中获取了文件对象并获取了文件大小。如果文件大小超过了限制，就弹出一个提示框告诉用户文件大小超过限制并把文件选择框的值清空，这样用户就可以重新选择合适的文件上传了。

示例

为了更好地理解上述代码的实现，下面为大家提供两个示例说明。

示例一：限制图片上传大小

假如我们有一个网站，允许用户上传图片，但要限制图片上传的大小不能超过 2MB。我们可以使用以下代码实现：

<!-- 上传图片的表单 -->
<form>
  <label>选择图片：</label>
  <input type="file" accept="image/*">
</form>

<!-- JavaScript 代码 -->
<script>
// 选取上传图片的 input 元素
const fileInput = document.querySelector('input[type="file"]');

// 设置图片大小限制为 2MB
const maxSize = 2 * 1024 * 1024;

// 为 input 元素添加事件监听器
fileInput.addEventListener('change', function() {
  // 获取图片对象
  const file = this.files[0];
  // 获取图片大小，单位为字节
  const fileSize = file.size;

  // 如果图片大小超过了限制
  if (fileSize > maxSize) {
    alert('图片大小超过了限制'); // 提示用户图片大小超过了限制
    this.value = ''; // 重置图片选择框
  }
});
</script>

代码中，我们通过 accept 属性限定输入的文件只能是图片，然后设置了图片大小的限制为 2MB。在 change 事件监听器中，获取到用户选择的图片对象，并获取图片大小。如果图片大小超过限制，则弹出一个提示框告诉用户图片大小超过限制并把图片选择框的值清空，这样用户就可以重新选择合适大小的图片上传了。

示例二：限制文件上传大小

假如我们有一个网站，允许用户上传文件，但要限制文件上传的大小不能超过 10MB。我们可以使用以下代码实现：

<!-- 上传文件的表单 -->
<form>
  <label>选择文件：</label>
  <input type="file">
</form>

<!-- JavaScript 代码 -->
<script>
// 选取上传文件的 input 元素
const fileInput = document.querySelector('input[type="file"]');

// 设置文件大小限制为 10MB
const maxSize = 10 * 1024 * 1024;

// 为 input 元素添加事件监听器
fileInput.addEventListener('change', function() {
  // 获取文件对象
  const file = this.files[0];
  // 获取文件大小，单位为字节
  const fileSize = file.size;

  // 如果文件大小超过了限制
  if (fileSize > maxSize) {
    alert('文件大小超过了限制'); // 提示用户文件大小超过了限制
    this.value = ''; // 重置文件选择框
  }
});
</script>