如何在图片上传时校验文件大小、扩展名并在不符合时显示alert提示

实现方案 #

你需要基于已有的按钮绑定的submitUploadFileForm方法补充文件校验逻辑，具体实现如下：

1. 完整校验逻辑代码 #

// 可根据业务需求自行调整配置参数
const ALLOWED_IMG_EXT = ['jpg', 'jpeg', 'png', 'gif', 'webp'] // 允许的图片扩展名
const MAX_IMG_SIZE = 5 * 1024 * 1024 // 最大允许上传大小，这里设置为5MB

function submitUploadFileForm() {
  // 替换为你实际的文件选择框ID
  const fileDom = document.getElementById('uploadImgInput')
  const selectFile = fileDom.files[0]

  // 校验是否选中文件
  if (!selectFile) {
    alert('请先选择需要上传的图片')
    return
  }

  // 校验扩展名是否合法
  const fileExt = selectFile.name.split('.').pop().toLowerCase()
  if (!ALLOWED_IMG_EXT.includes(fileExt)) {
    alert(`仅支持上传以下格式图片：${ALLOWED_IMG_EXT.join('、')}`)
    return
  }

  // 校验文件大小是否超出限制
  if (selectFile.size > MAX_IMG_SIZE) {
    alert(`图片大小不能超过${MAX_IMG_SIZE / 1024 / 1024}MB`)
    return
  }

  // 校验文件是否为真实图片（防止修改扩展名伪造图片）
  const tempImg = new Image()
  const tempUrl = URL.createObjectURL(selectFile)
  tempImg.onload = () => {
    URL.revokeObjectURL(tempUrl)
    // 校验通过，这里写你原本的表单提交逻辑
    // 示例：document.getElementById('uploadForm').submit()
  }
  tempImg.onerror = () => {
    URL.revokeObjectURL(tempUrl)
    alert('所选文件不是合法的图片文件')
  }
  tempImg.src = tempUrl
}

2. HTML补充优化建议 #

给文件选择框添加accept属性，引导用户默认仅能选择图片类文件，降低误选概率，原有按钮代码无需修改：

<!-- 文件选择框示例，替换为你实际的文件控件代码 -->
<input type="file" id="uploadImgInput" accept="image/*">

<!-- 你的原有按钮代码 -->
<button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>

注意事项 #

前端校验仅用于优化用户体验，后端服务必须同步做相同的校验逻辑，避免恶意用户绕过前端规则上传非法文件。

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