需要帮助修复 javascript 以在具有多个文件上传输入的表单页面上创建单个点击事件

Question

我有一个包含多个文件上传字段的重力表单页面。

当用户单击按钮（修改标签）时，保存文件输入的 div 容器会附加文件名。

我的问题是，根据我用来重新设置字段样式和设置的教程，javascript 仅针对第一个文件输入，而其他文件在单击时不起作用。

如何修复我的代码，以便 javascript 监听所有文件输入，而不仅仅是第一个？

（我试图将文件名附加到容器中的现有 div。如果你知道我打开的更好方法）

一些截图

1. 四个文件上传字段

1. 当我单击第一个字段按钮时，文件名成功显示。当我点击剩余的字段按钮时，没有文件名出现

问题似乎在于使用 .querySelector() 仅针对页面上的第一个文件输入。

我已经尝试过，同样使用 getElementsByClassName，使用 querySelectorAll 遍历循环。但是还真想不通

使用 .querySelector()

HTML

<li id="field_3_9" class="gfield gfield_upload w-100 field_sublabel_below field_description_below gfield_visibility_visible">
  <label class="gfield_label" for="input_3_9">upload file</label>
  <div class="ginput_container ginput_container_fileupload">
    <input type="hidden" name="MAX_FILE_SIZE" value="52428800">
    <input name="input_9" id="input_3_9" type="file" class="medium" aria-describedby="validation_message_3_9 live_validation_message_3_9 extensions_message_3_9" onchange="javascript:gformValidateFileSize( this, 52428800 );" tabindex="55">
    <span id="extensions_message_3_9" class="screen-reader-text"></span>
    <div class="validation_message" id="live_validation_message_3_9">pdf test.pdf</div>
  </div>
</li>

Javascript

var inputLabel = document.querySelector('.gfield_label');
var inputWrapper = document.querySelector('.gfield_upload');
var input =  document.querySelector("input[type='file']");
var inputSuccess = document.querySelector('.validation_message');

input.addEventListener('change', () => {
  const name = input.value.split(/\\|\//).pop();
  const truncated = name.length > 20 
    ? name.substr(name.length - 20) 
    : name;

    inputSuccess.innerHTML = truncated;
});

尝试使用 .querySelectorAll()

  var inputWrapper = document.querySelectorAll('.gfield_upload');

  Array.from(inputWrapper).forEach(input => {
    input.addEventListener('click', function(event) {
        var realInput =  document.querySelector("input[type='file']");
        var inputSuccess = document.querySelector('.validation_message');

        realInput.addEventListener('change', () => {
            const name = realInput.value.split(/\\|\//).pop();
            const truncated = name.length > 20 
              ? name.substr(name.length - 20) 
              : name;

            inputSuccess.innerHTML = truncated;
        });
    });
});

我的期望是当我单击任何文件输入字段的上传按钮时，文件名将附加到输入容器并在屏幕上可见。

Answer 1

您的 querySelectorAll 解决方案几乎可以正常工作，您只是从错误的根元素进行查询。