JavaScript中检查MIME类型：调整onchange函数的文件格式判断逻辑

嘿，这问题很好解决！咱们只需要在你的onchange事件函数里，准确判断上传文件的类型，把非JPEG和PNG的文件筛选出来进入if分支就行。我给你几种靠谱的实现方式：

方法一：通过MIME类型判断（推荐） #

浏览器会自动识别文件的MIME类型，这种方式比后缀判断更准确，能避免用户改后缀名蒙混过关的情况：

<!-- 给文件输入框绑定事件 -->
<input type="file" id="uploadInput" onchange="handleFileUpload(event)">

function handleFileUpload(event) {
  // 获取选中的第一个文件
  const selectedFile = event.target.files[0];
  if (!selectedFile) return; // 没选文件就直接返回，避免报错

  // 定义允许的文件MIME类型
  const allowedMimeTypes = ['image/jpeg', 'image/png'];

  // 判断当前文件是否不在允许列表里
  if (!allowedMimeTypes.includes(selectedFile.type)) {
    // 这里就是你要处理非JPEG/PNG的逻辑，比如弹窗提示
    alert('抱歉，请上传JPEG或PNG格式的文件！');
    // 可选：清空输入框，防止用户重复提交错误文件
    event.target.value = '';
    return;
  }

  // 如果是允许的格式，就执行后续的正常逻辑（比如上传、预览）
  console.log('文件格式合规，准备处理:', selectedFile.name);
}

方法二：通过文件名后缀判断 #

如果担心某些浏览器对MIME类型识别有偏差，也可以通过文件名的后缀来判断：

function handleFileUpload(event) {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return;

  // 定义允许的文件后缀（转小写避免大小写问题）
  const allowedExtensions = ['jpg', 'jpeg', 'png'];
  // 获取文件后缀并转小写
  const fileExtension = selectedFile.name.split('.').pop().toLowerCase();

  if (!allowedExtensions.includes(fileExtension)) {
    alert('请上传JPEG或PNG格式的文件！');
    event.target.value = '';
    return;
  }

  // 后续逻辑
}

方法三：双重验证（更严谨） #

想要最严谨的验证，可以把MIME类型和后缀判断结合起来，双保险：

function handleFileUpload(event) {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return;

  const allowedMimeTypes = ['image/jpeg', 'image/png'];
  const allowedExtensions = ['jpg', 'jpeg', 'png'];
  const fileExtension = selectedFile.name.split('.').pop().toLowerCase();

  // 只要其中一个不符合，就进入if分支
  if (!allowedMimeTypes.includes(selectedFile.type) || !allowedExtensions.includes(fileExtension)) {
    alert('仅支持JPEG和PNG格式的文件，请重新上传！');
    event.target.value = '';
    return;
  }

  // 正常处理逻辑
}

这样调整之后，PDF或者其他非JPEG/PNG的文件就会触发if分支里的弹窗提示，而符合要求的图片则会跳过这个分支执行后续逻辑啦～

内容的提问来源于stack exchange，提问作者Boopathi D