多唯一ID表单上传文件时JavaScript始终操作首个表单问题求助

问题根源 #

• 表单内file input的id全局重复：所有表单的file input都使用了固定id file-upload，HTML规范要求id必须全局唯一，label的for属性只会匹配到页面中第一个符合id的input元素，因此点击任意表单的上传按钮，实际触发的都是第一个表单的文件选择器，修改自然只会作用于第一个表单。
• 全局函数重复定义：你在每个表单后都声明了同名的spinnerLoad全局函数，JS中全局作用域下重复声明的同名函数会发生覆盖，最终只有最后声明的函数会生效，进一步导致逻辑异常。
• 事件调用时this指向错误：直接写onchange="spinnerLoad()"调用函数时，函数内部的this默认指向window对象，无法正确获取到触发事件的input的files属性。

修复方案 #

方案1：最小改动适配原有逻辑 #

仅需要做两处修改，不需要调整原有DOM结构逻辑：

1. 全局只定义一次公共JS函数，放在页面底部即可，不需要每个表单后重复定义：

function spinnerLoad(inputEl, id) {
  document.getElementById('file-name' + id).textContent = inputEl.files[0].name;
      
  const spinnerEl = document.getElementById('spinner' + id);
  spinnerEl.classList.replace('fas', 'spinner-border');
  spinnerEl.classList.replace('fa-file-upload', 'spinner-border-sm');
  document.getElementById('uploadForm' + id).submit()
}

2. 修改Thymeleaf表单模板，修正input重复id、传入事件触发元素和id参数：

<!--${id} variable is server-side and it's there to make unique each form, I'm using Thymeleaf template engine-->
<form th:id="'uploadForm'+${id}" method="post" enctype="multipart/form-data" th:action="@{/upload/{id} (id=${id})}">
    <!-- 修正label的for属性为动态唯一值 -->
    <label th:for="'file-upload'+${id}" class="btn btn-outline-success">
        <span th:id="'spinner'+${id}" class="fas fa-file-upload"></span> <b>Upload file:</b> <i th:id="'file-name'+${id}">No file selected</i>
    </label>
    <!-- 修正input id为动态唯一值，onchange传入当前元素和id参数 -->
    <input th:id="'file-upload'+${id}" type="file" name="multipartFile"  accept="application/pdf" style="display: none" th:onchange="spinnerLoad(this, [[${id}]])"/>
</form>

方案2：更简洁的无id依赖实现 #

不需要给展示元素生成唯一id，通过DOM关系定位元素，后续维护更方便：

1. 公共JS代码：

function spinnerLoad(inputEl) {
  // 直接获取当前input所属的表单
  const currentForm = inputEl.closest('form');
  // 通过类名定位当前表单内的目标元素
  currentForm.querySelector('.file-name').textContent = inputEl.files[0].name;
  
  const spinnerEl = currentForm.querySelector('.upload-spinner');
  spinnerEl.classList.replace('fas', 'spinner-border');
  spinnerEl.classList.replace('fa-file-upload', 'spinner-border-sm');
  
  currentForm.submit();
}

2. 简化后的Thymeleaf模板：

<form method="post" enctype="multipart/form-data" th:action="@{/upload/{id} (id=${id})}">
    <label th:for="'file-upload'+${id}" class="btn btn-outline-success">
        <span class="fas fa-file-upload upload-spinner"></span> <b>Upload file:</b> <i class="file-name">No file selected</i>
    </label>
    <input th:id="'file-upload'+${id}" type="file" name="multipartFile" accept="application/pdf" style="display: none" onchange="spinnerLoad(this)"/>
</form>

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