Bootstrap自定义文件输入框及关联标签清除失效，求解决方案

• 对<label>标签错误使用val()方法：val()仅适用于表单输入控件，<label>是普通文本元素，修改其内容需要使用text()/html()方法
• 部分浏览器对input[type=file]的val(null)兼容性不佳，直接赋值空字符串或者克隆替换的方案更通用
• 如果你没有引入并初始化第三方bootstrap-fileinput插件，调用fileinput('clear')会直接报错，自然无法生效
• 额外问题：你的label的for属性绑定错误，应该绑定input的id而不是name，会导致点击label无法唤起文件选择框

1. 替换上传成功回调的清空逻辑 #

在你上传成功的vendor分支逻辑中，把原来的清空代码替换为以下内容：

// 清空文件输入框：克隆替换方案兼容所有浏览器，避免缓存问题
const $fileInput = $("#documentUploader");
$fileInput.replaceWith($fileInput.val('').clone(true));
// 重置关联标签的显示文本为默认值
$("#documentUploaderLabel").text("Choose files");

如果确认已经正确初始化了第三方bootstrap-fileinput插件，用以下代码即可：

$(".custom-file-input").fileinput("clear");

2. 可选：模态框关闭时自动清空 #

避免用户上传完成后直接关闭模态框，下次打开还残留上次的内容，新增模态框关闭事件监听：

$('#vendorDocumentUploadModal').on('hidden.bs.modal', function () {
  const $fileInput = $("#documentUploader");
  $fileInput.replaceWith($fileInput.val('').clone(true));
  $("#documentUploaderLabel").text("Choose files");
  // 同时清空上传进度提示
  $('#showVendorDocumentProgress').empty();
})

3. 可选：修复label关联错误 #

把模态框中label的for属性修改为input的id，修复点击label无法唤起文件选择的问题：

<!-- 修改前 -->
<!-- <label class="custom-file-label" id="documentUploaderLabel" for="file[]">Choose files</label> -->
<!-- 修改后 -->
<label class="custom-file-label" id="documentUploaderLabel" for="documentUploader">Choose files</label>

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