文件上传前如何校验文件类型和大小？

Mc.怡彤提问于 2026-03-25 06:56:22 阅读 19

交互

我用 input type=”file” 做上传，想在用户选完文件后立刻校验类型和大小，但不确定怎么准确判断。比如只允许 jpg/png，且不超过 5MB。

我试过读取 file.type 和 file.size，但有些图片的 MIME 类型是 image/jpeg，有些却是 image/jpg，还有些甚至识别成 application/octet-stream，根本没法可靠判断。而且 file.size 是字节，要自己换算成 MB 吗？

有没有稳妥点的做法？比如结合文件扩展名和二进制头一起校验？现在代码是这样：

const file = e.target.files[0];
if (file.size > 5 * 1024 * 1024) {
  alert('文件太大');
}
if (!['image/jpeg', 'image/png'].includes(file.type)) {
  alert('格式不支持');
}

我来解答赞 7 收藏

反馈

1 条解答

百里怡萱 Lv1

文件类型判断确实有点坑爹，MIME类型有时候不太靠谱。文件扩展名和二进制头校验是个好主意。代码给你，看这个：

function validateFile(file) {

  const maxSizeInBytes = 5 * 1024 * 1024; // 5MB

  const allowedTypes = ['image/jpeg', 'image/png'];

  const allowedExtensions = ['.jpg', '.jpeg', '.png'];



  if (file.size > maxSizeInBytes) {

    alert('文件太大');

    return false;

  }



  const fileType = file.type.toLowerCase();

  const fileName = file.name.toLowerCase();

  const fileExtension = fileName.substring(fileName.lastIndexOf('.'));



  if (!allowedTypes.includes(fileType) && !allowedExtensions.includes(fileExtension)) {

    alert('格式不支持');

    return false;

  }



  // Optional: Check the file header for more reliable type detection

  const fileReader = new FileReader();

  fileReader.onloadend = function(e) {

    const arrayBuffer = e.target.result;

    const uint8Array = new Uint8Array(arrayBuffer);

    const header = uint8Array.slice(0, 4).join(',');



    if ((header === '255,216,255,224' || header === '255,216,255,225') && fileType !== 'image/jpeg') {

      alert('这不是一个有效的JPEG文件');

      return false;

    }



    if (header === '137,80,78,71' && fileType !== 'image/png') {

      alert('这不是一个有效的PNG文件');

      return false;

    }

  };



  fileReader.readAsArrayBuffer(file);



  return true;

}



document.getElementById('fileInput').addEventListener('change', function(e) {

  const file = e.target.files[0];

  validateFile(file);

});

这代码先检查文件大小，再看MIME类型和扩展名，最后通过二进制头进一步验证文件类型。希望有用。

2026-03-25 07:00