实现文件选择后自动填充文件名至input标签及代码问题排查

Absolutely achievable! 你想要的「手动输入文件名 + 选择本地文件后自动填充文件名」的需求完全可以实现，咱们来梳理下你代码里的几个明显问题，再给你修正后的方案：

你的代码里存在这些明显错误 #

• DOM选择器不匹配：JS里你写了$('#file-upload')[0].files[0].name，但你的文件上传input的ID是file-add-upload，这会直接导致找不到元素，抛出Cannot read properties of undefined的错误。
• 无意义的函数调用：你用了data(file)，但根本没定义过这个函数，这会触发data is not defined的引用错误。
• HTML标签嵌套违规：你把<span>、<form>放到了<input>标签内部，但<input>是自闭合标签，不能包含任何子元素，这会导致浏览器解析异常。
• 冗余的form标签：这里单独加的<form>完全没必要，反而可能干扰后续的表单提交逻辑（毕竟你已经在模态框的表单语境里了）。

修正后的完整代码 #

修正后的HTML #

<div class="modal-body">
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">File name</label>
    <div class="col-sm-9">
      <!-- 修正input标签的嵌套问题，单独放置 -->
      <input type="text" class="form-control" name="name" id="modal-add-tech-file-name" required>
      <span>
        <!-- 移除多余的form标签 -->
        <label for="file-add-upload" class="custom-file-upload">
          <i class="fa fa-cloud-upload"></i> Select file
        </label>
        <input id="file-add-upload" name='upload_cont_img' type="file" style="display:none;">
      </span>
    </div>
  </div>
</div>

修正后的JavaScript #

$('#file-add-upload').change(function() {
  // 直接获取当前触发事件的input的文件对象
  const selectedFile = this.files[0];
  // 增加判断：如果用户选择了文件才填充
  if (selectedFile) {
    $('#modal-add-tech-file-name').val(selectedFile.name);
  }
});

效果说明 #

修改后，用户既可以手动在输入框里输入任意文件名，也可以点击「Select file」按钮选择本地文件，选中后文件名会自动填充到输入框中。另外加的if (selectedFile)判断，能避免用户打开文件选择框后又取消选择的情况出现报错，鲁棒性更强。

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