图片上传JS代码改造需求：限制3张上传及违规词校验

需求 #

给现有图片上传预览代码添加两个功能：

• 最多允许上传3张图片
• 对文件名做违规词校验，校验不通过时显示错误提示

改造后完整代码 #

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    // 定义违规词列表，可根据需求修改
    const forbiddenWords = ['违规', '敏感', '禁止'];
    // 委托remove点击事件，避免重复绑定
    $(document).on('click', '.remove', function(){
      $(this).parent('.pip').remove();
    });

    $("#files").on("change", function(e) {
      const files = e.target.files;
      const filesLength = files.length;
      // 统计已上传的图片数量
      const uploadedCount = $('.pip').length;
      // 计算本次可处理的文件数
      const availableSlots = 3 - uploadedCount;

      if (availableSlots <= 0) {
        alert('最多只能上传3张图片');
        // 清空文件选择器，避免重复触发
        this.value = '';
        return;
      }

      // 如果本次选的文件超过剩余额度，只处理前availableSlots个
      const processCount = Math.min(filesLength, availableSlots);

      for (let i = 0; i < processCount; i++) {
        const f = files[i];
        // 文件名违规词校验
        const fileName = f.name.toLowerCase();
        const hasForbiddenWord = forbiddenWords.some(word => fileName.includes(word.toLowerCase()));
        
        if (hasForbiddenWord) {
          alert(`文件"${f.name}"包含违规内容，无法上传`);
          continue;
        }

        const fileReader = new FileReader();
        fileReader.onload = (function(file) {
          return function(e) {
            $("<span class='pip'>" +
              "<img class='imageThumb' src='" + e.target.result + "' title='" + file.name + "'/>" +
              "<br/><span class='remove'>Remove image</span>" +
              "</span>").insertAfter("#files");
          };
        })(f);
        fileReader.readAsDataURL(f);
      }
      // 清空文件选择器，允许重复选择相同文件
      this.value = '';
    });
  } else {
    alert("你的浏览器不支持File API，请升级浏览器");
  }
});

关键改动说明 #

• 上传数量限制：

  • 每次选择文件时，先统计已显示的.pip元素数量，计算剩余可上传额度
  • 如果剩余额度为0，直接提示并清空文件选择器
  • 若用户一次选多个文件，只处理剩余额度内的数量，避免超量

• 违规词校验：

  • 新增forbiddenWords数组，可自定义需要拦截的关键词
  • 把文件名和违规词都转成小写，避免大小写导致的漏判
  • 校验不通过时弹出提示，并跳过该文件的预览处理

• 事件绑定优化：

  • 把.remove的点击事件委托到document上，无需每次新增图片都绑定事件，解决重复绑定导致的多次触发问题
  • 每次处理完文件后清空文件选择器的value，允许用户重复选择相同的文件

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