jQuery上传图片后如何将文件名显示到image_main_file_name输入框

问题根因 #

你代码存在两个核心问题直接导致赋值失败：

1. HTML ID重复违规：id属性要求全局唯一，但你有2个完全相同的id="image_main_file_name"的输入框，ID选择器解析行为不可预测。
2. 输入框被意外删除：你代码中$(input).closest('dd').find('.info').html(fileName)会直接覆盖.info节点下的所有内容，原本放在.info里的输入框会被直接替换成纯文本文件名，后续自然找不到可赋值的输入框元素。

解决方案 #

分两种业务场景选择修正方案：

场景1：仅给当前上传操作对应的输入框赋值，同时保留.info区域的文件名展示 #

首先调整HTML结构，在.info里新增单独的文件名展示容器，避免覆盖输入框：

<div class="info">
  <p class="file_name_show"></p>
  <input type="text" name="image_main_file_name" value="display_img_file_name_here">
</div>
<!-- 第二个上传模块的.info结构同步调整即可 -->

再修改JS代码，分别给文件名展示容器和输入框赋值：

function setImage(input) {
  let $imgBox = $(input).closest('dd').find('.img_box');
  var reader = new FileReader();
  reader.onload = function(e) {
    $imgBox.html($('<img>').attr('src', e.target.result));
    let fileName = input.files[0].name;
    $(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
    $(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
    // 单独给文件名展示容器赋值，不会覆盖输入框
    $(input).closest('dd').find('.info .file_name_show').text(fileName);
    // 用相对路径查找当前上传区块对应的输入框赋值，不用ID选择器避免重复ID问题
    $(input).closest('dd').find('.info input[name="image_main_file_name"]').val(fileName);
  };
  reader.readAsDataURL(input.files[0]);
}

场景2：上传任意文件后给所有同名输入框同步赋值 #

如果不需要区分上传位置，所有name="image_main_file_name"的输入框都同步填入同一个文件名，直接使用属性选择器替代ID选择器即可，同样需要先修改原来覆盖.info内容的代码，避免输入框被删除。

// 替换原来的$("#image_main_file_name").val(fileName);
$('input[name="image_main_file_name"]').val(fileName);

优化建议 #

删除所有重复的id="image_main_file_name"属性，如果需要通用选择标识，可改为class="image_main_file_name"，后续用类选择器.image_main_file_name访问，符合HTML规范也能避免后续出现其他选择器异常问题。

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