如何在新增图片批次时触发jQuery文件名截断函数？

问题背景 #

我开发了支持分批拖拽上传的图片上传器，可将图片转为base64格式并显示缩略图，新图片会追加到现有列表中展示。编写的jQuery函数能截断过长的文件名，超限时显示“read more”按钮展开完整文本，但该函数仅对初始加载的图片生效，新增图片的文件名无法触发截断逻辑。

解决方案 #

核心思路是将文件名截断逻辑封装为可复用函数，每次新增图片完成后主动调用该函数，同时改用事件委托处理动态生成的“read more”按钮点击事件。

修改后的代码 #

1. 封装文件名截断函数

将原来的截断逻辑抽成独立函数，添加判断避免重复处理同一元素：

function truncateFileNames() {
  var maxLength = 5;
  $(".show-read-more").each(function(){
      // 跳过已处理过的元素，防止重复添加read more按钮
      if ($(this).find(".read-more").length === 0) {
          var myStr = $(this).text();
          if($.trim(myStr).length > maxLength){
              var newStr = myStr.substring(0, maxLength);
              var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
              $(this).empty().html(newStr);
              $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
              $(this).append('<span class="more-text">' + removedStr + '</span>');
          }
      }
  });
}

2. 初始化与事件委托

在页面加载时处理初始图片，同时用事件委托绑定动态元素的点击事件：

$(document).ready(function(){
  // 处理页面初始加载的图片
  truncateFileNames();

  // 事件委托：处理动态生成的.read-more按钮点击
  $(document).on("click", ".read-more", function(){
      $(this).siblings(".more-text").contents().unwrap();
      $(this).remove();
  });
});

3. 新增图片后触发截断

在图片加载完成并添加到DOM后，调用截断函数处理新添加的文件名：

let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
  // 创建图片容器
  let imageContainer = document.createElement("figure");
  let img = document.createElement("img");
  img.src = reader.result;
  imageContainer.appendChild(img);
  imageContainer.innerHTML += `<div class="caption"><p class="show-read-more">${name}</p></div>`;
  imageDisplay.appendChild(imageContainer);
  
  // 对新添加的图片文件名执行截断处理
  truncateFileNames();
};

关键说明 #

• 封装函数实现逻辑复用，无需重复编写截断代码；
• 事件委托确保动态生成的“read more”按钮能正常响应点击；
• 添加重复处理判断，避免同一文件名多次被截断，防止出现多个“read more”按钮。

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