jQuery循环校验图片格式时如何清空无效的文件输入值

数据老陈

2026-8-30

jQuery 3.6.0 图片上传时过滤无效格式文件实现方案

失效原因

<input type="file"> 元素返回的files属性是只读的FileList集合，原生不支持直接删除集合内的单个文件项，因此无法在遍历过程中直接剔除无效文件
你之前调用$(this).val("")不生效的核心原因是作用域问题：$.each遍历回调内的this指向当前遍历到的单个文件对象，而非文件选择框DOM元素，调用方法自然不会生效；且val("")会清空所有已选文件，无法保留符合格式要求的有效文件。

可直接运行的实现代码

实现逻辑为遍历筛选出所有符合格式要求的文件，通过DataTransfer对象构造新的有效文件列表，重新赋值给文件选择框，自动剔除无效项：

$(':file').change(function(){
  // 缓存文件选择框DOM引用，避免作用域错乱
  const fileInput = this;
  const selectedFiles = fileInput.files;
  const allowedTypes = ["image/gif", "image/jpeg", "image/png"];
  const validFiles = [];
  let invalidExist = false;

  $.each(selectedFiles, function(index, file){
    if ($.inArray(file.type, allowedTypes) !== -1) {
      validFiles.push(file);
    } else {
      invalidExist = true;
    }
  });

  if (invalidExist) {
    alert('仅支持上传jpg、jpeg、png格式的图片');
    // 构造新的文件列表，仅保留有效文件
    const dt = new DataTransfer();
    validFiles.forEach(file => dt.items.add(file));
    // 替换文件选择框的原有文件列表
    fileInput.files = dt.files;
  }
});