我已经创建了一个你的代码的分支，我认为问题已经解决了：https://jsfiddle.net/ahvonenj/v1nyLzbs/13/
我从代码的底部删除了一些东西，现在它只是这样：

$(document).click('.read-more',function(e){
    const target = $(e.originalEvent.target);
    target.next('span.more-text').removeClass('hidden')
  target.remove();
});

由于这些.read-more元素在文档加载时并不存在，因此我们不能将click事件处理程序直接绑定到它们。相反，我们将click事件处理程序绑定到文档，并提供.read-more选择器，如图所示。
这里最好使用$(e.originalEvent.target)而不是$(this)，原因我现在不记得了，因为我已经很久没有使用jQuery了，但我记得它就是这样做的。
我在CSS代码的底部添加了一个简单的hidden类：

.hidden {
  display: none;
}

因为我把你的fileHandler函数改成了这样：

const fileHandler2 = (file, name, type) => {
  if (type.split("/")[1] !== "jpeg") {
    //File Type Error
    container.classList.remove("dropped");
    submit.classList.remove("hideit");
    error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
    error.classList.remove("hideit");
    setTimeout(function(){
         error.innerHTML="";
        error.classList.add("hideit");

       },90000);
    return false;
  }
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    //image and file name
    let imageContainer = document.createElement("figure");
    let img = document.createElement("img");
    img.src = reader.result;
    imageContainer.appendChild(img);
    
    var maxLength = 5;
    
    if($.trim(name).length > maxLength){
      var newStr = name.substring(0, maxLength);
      var removedStr = name.substring(maxLength, $.trim(name).length);
      imageContainer.innerHTML += `<a class="read-more">read more...</a><span class="more-text hidden">${removedStr}</span>`;
    } else {
        imageContainer.innerHTML += `<div class="caption"><p class="show-read-more" id="caption">${name}</p></div>`;
    }
    
    imageDisplay.appendChild(imageContainer);
    
  };
};

它现在检查文件名的长度，并输出“阅读更多”按钮的HTML和单击按钮时将显示的元素。单击按钮时显示的元素最初是隐藏的，具有hidden类的元素。当单击“阅读更多”按钮时，我们将删除隐藏类，同时也将删除“阅读更多”按钮。
如果文件名不是太长，文件名会正常显示在图片下面。我一直想对新的jQuery开发人员说的一件事是不要混淆$()。它没有什么特别之处，使用它不会把你带到一些与JavaScript分离的“jQuery世界”。$()是一个普通的JavaScript函数，但函数名只是$`。你几乎可以用以下命令来创建你自己的jQuery：

const $ = function(selector) {
    return document.querySelectorAll(selector);
}

显然，这是一个非常简化的例子，但重点是要显示$()的非特殊性质。混淆来自jQuery用自己的各种东西 Package $函数的结果，所以它更像是：

const $ = function(selector) {
    const jQueryObject = {
        element: document.querySelectorAll(selector),
        next: function() {},
        html: function() {},
        text: function() {},
        ...
    }

    return jQueryObject;
}

这样有用吗