修复Gravity Form多文件上传框仅首个点击事件生效的JS问题

嘿，我完全懂你现在的困扰——Gravity Forms页面里的多个文件上传按钮，只有第一个能正常把文件名显示到对应容器里，剩下的点击了毫无反应对吧？这确实是因为一开始用querySelector只会抓取匹配到的第一个元素，咱们来把这个问题彻底解决掉。

问题根源回顾 #

querySelector只会返回匹配选择器的第一个DOM元素，所以你的事件逻辑只绑定在了第一个文件输入框上，其他自然没反应。你试过getElementsByClassName和querySelectorAll循环没成功，大概率是因为没有正确关联每个输入框和它对应的显示容器，或者事件绑定的方式不对。

解决方案：遍历所有上传元素并绑定对应逻辑 #

首先得明确你的HTML结构（我先按Gravity Forms常见的自定义上传结构来举例，你可以根据自己的实际代码调整选择器），假设每个上传模块的结构大概是这样：

<div class="gfield custom-file-upload">
  <button class="custom-upload-btn">点击上传文件</button>
  <input type="file" class="gform_upload_file" style="display: none;">
  <div class="file-name-display"></div> <!-- 用来显示文件名的容器 -->
</div>

接下来用querySelectorAll获取所有文件输入框，然后逐个绑定事件，同时确保每个输入框都能找到自己对应的按钮和显示容器：

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', () => {
  // 获取页面上所有的文件上传输入框
  const allFileInputs = document.querySelectorAll('.gform_upload_file');

  // 遍历每个输入框，为它们单独绑定逻辑
  allFileInputs.forEach(fileInput => {
    // 找到当前输入框对应的自定义上传按钮（这里假设按钮是输入框的前一个兄弟元素）
    const uploadButton = fileInput.previousElementSibling;
    // 找到当前输入框对应的文件名显示容器（假设是输入框的后一个兄弟元素）
    const fileNameContainer = fileInput.nextElementSibling;

    // 给自定义按钮绑定点击事件，触发隐藏的文件输入框的点击
    uploadButton.addEventListener('click', () => {
      fileInput.click();
    });

    // 给文件输入框绑定change事件，当选择文件后更新对应容器的内容
    fileInput.addEventListener('change', (event) => {
      // 先清空容器之前的内容
      fileNameContainer.innerHTML = '';

      // 如果有选中的文件
      if (event.target.files.length > 0) {
        // 遍历所有选中的文件（支持多文件上传的情况）
        Array.from(event.target.files).forEach(file => {
          const fileNameSpan = document.createElement('span');
          fileNameSpan.textContent = file.name;
          fileNameContainer.appendChild(fileNameSpan);
          // 给多个文件加个分隔符
          fileNameContainer.appendChild(document.createTextNode(' · '));
        });
        // 移除最后一个多余的分隔符
        if (fileNameContainer.lastChild) {
          fileNameContainer.removeChild(fileNameContainer.lastChild);
        }
      }
    });
  });
});

关键注意事项 #

1. 选择器要匹配你的实际结构：如果你的按钮、输入框、显示容器的类名或者DOM关系和我举例的不一样，一定要调整对应的选择器。比如如果显示容器是父容器的子元素，可以用fileInput.closest('.custom-file-upload').querySelector('.file-name-display')来定位。
2. 处理多文件上传：如果你的表单允许多文件选择，代码里的Array.from(event.target.files).forEach会把所有选中的文件名都显示出来；如果是单文件，直接取event.target.files[0].name就可以。
3. 避免DOM加载问题：用DOMContentLoaded包裹代码，确保所有DOM元素加载完成后再执行，避免出现找不到元素的情况。

这样调整后，每个上传按钮点击后，对应的容器都会正确显示选中的文件名啦！

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