JS上传文件大小限制

在Web开发中，文件上传功能已经成为了必备功能之一，但是，为了保证网站的稳定和安全，通常会对上传的文件进行大小限制。本文将介绍如何使用JavaScript实现文件上传大小限制。

实现方法

考虑到客户端上传文件大小限制是比较容易被绕过的，因此，建议在服务端也进行大小限制。

在前端实现时，我们可以通过获取input file元素的files属性，来获取用户选择的文件的大小和类型信息。接着，我们可以通过判断文件大小是否超出限制值来防止用户上传过大的文件。

示例代码如下：

// 获取文件上传元素
var input = document.getElementById('upload-file');

// 绑定change事件，当用户选择文件后触发
input.addEventListener('change', function() {
  // 获取第一个文件
  var file = input.files[0];
  // 检查文件类型
  var fileType = file.type;
  if (!(fileType === 'image/png' || fileType === 'image/jpeg')) {
    alert('只能上传 PNG/JPEG 图片文件！');
    input.value = '';
    return false;
  }
  // 检查文件大小，限制为10MB
  var fileSize = file.size;
  var maxSize = 10 * 1024 * 1024;
  if (fileSize > maxSize) {
    alert('文件大小不能超过10MB！');
    input.value = '';
    return false;
  }
});

在示例代码中，我们首先获取了文件上传元素，并在change事件中进行了文件类型和大小的检查。如果用户选择了不合法的文件类型或超出了限制的文件大小，会弹出相应的提示，并清空上传文件元素的值，防止用户连续上传不合法文件。

结语

文件上传功能已经成为了Web开发的常见需求之一，限制文件大小是一种有效的手段，可以避免一些非法用户上传垃圾或恶意文件。本文通过JavaScript代码实现了文件上传大小限制，希望对大家有所帮助。