纯JS获取表单上传图片文件大小的可靠性及防篡改疑问

嘿，作为服务端开发者，你考虑到前端校验的安全性问题真的很靠谱——毕竟前端层面的任何数据都有被篡改的可能，咱们把这个问题掰碎了说：

1. e.target.files[0].size的可靠性 #

这个值是浏览器从用户本地文件系统读取的原始文件大小，在正常用户操作场景下，它是准确的。但注意：它是可以被伪造的。

比如有人可以通过浏览器调试工具直接修改File对象的size属性，或者用JS脚本构造一个虚假的File实例，把size设成符合要求的值，实际文件却远大于限制。就像你担心的文件扩展名伪造一样，前端提供的文件元数据都不是绝对可信的。

2. 前端校验的意义 #

虽然前端校验不可靠，但依然很有必要做：

• 能即时给用户反馈，不用等文件上传到服务端才返回错误，大大提升用户体验
• 减少无效的文件上传请求，减轻服务端的带宽和资源压力

3. 必须保留的服务端校验 #

你提到已经会在服务端做校验，这是核心！服务端绝对不能依赖前端传过来的文件大小值，必须自己读取上传文件的实际字节数，然后和限制值对比。不管前端有没有做校验，服务端的校验都是最后也是最关键的防线。

前端校验示例代码 #

给你一个简单的前端校验实现参考：

const imageInput = document.getElementById('image-upload');
const MAX_UPLOAD_SIZE = 5 * 1024 * 1024; // 限制为5MB

imageInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  if (selectedFile.size > MAX_UPLOAD_SIZE) {
    alert(`图片大小不能超过${MAX_UPLOAD_SIZE / 1024 / 1024}MB，请重新选择`);
    imageInput.value = ''; // 清空已选择的文件
    return;
  }

  // 校验通过，可继续执行上传逻辑
});

总结一下：前端用file.size做快速校验没问题，但别把它当权威；服务端必须自己校验文件实际大小，双管齐下才能既友好又安全。

内容的提问来源于stack exchange，提问作者Hassan Baig