JQuery克隆元素时文件上传预览功能失效问题求助

看起来你遇到的核心问题是克隆元素时，硬编码的onchange事件无法正确关联到对应递增后的ID，而且依赖全局变量i的方式会因为变量值动态变化导致指向错误的元素。下面我会一步步分析问题根源，并给出更健壮的解决方案。

问题根源分析 #

你原来的代码里，尝试修改onchange事件时犯了一个典型错误：

$("#upload_" + i+"").attr("onchange", "document.getElementById('preview_'+ i + '').src = window.URL.createObjectURL(this.files[0])");

这里的字符串中的i并没有被替换成当前的数值，而是作为字面量存在。当事件真正触发时，它会去读取全局变量i的最新值——而此时i已经因为多次点击"Add Row"变成了更大的数字，自然无法匹配到正确的预览图片ID。

另外，这种硬绑定ID的方式本身就不够灵活，一旦DOM结构变化就容易出错。

推荐解决方案：事件委托 + DOM关系查找 #

最好的方式是完全摆脱对ID的依赖，通过事件委托监听父容器的事件，再利用DOM元素的相对关系找到对应的预览图片。这种方式不需要每次克隆都绑定新事件，代码更简洁健壮。

步骤1：优化HTML结构 #

给文件上传框和预览图片添加统一的类名，去掉硬编码的onchange事件：

<div class="clonable-block" data-toggle="cloner">
  <a href="#" id="addrow" class="btn btn-info btn-block clonable-button-add" style="border-radius: 0px; font-size: 13px;">
    <i class="fa fa-file pr-2"></i>Add Row
  </a>
  <div class="clonable">
    <br/>
    <br/>
    <img id="upload_1" alt="your image" width="100" height="100" class="clonable-increment-id image-preview" />
    <input type="file" id="preview_1" class="image-upload">
    <br/>
    <br/>
  </div>
</div>

步骤2：用事件委托绑定上传逻辑 #

只需要在父容器上绑定一次事件，所有现有和未来克隆的元素都能触发：

var i = 1;

// 事件委托：监听所有.image-upload的change事件
$('.clonable-block').on('change', '.image-upload', function() {
  // 通过兄弟关系找到对应的预览图片，完全不用依赖ID
  const previewImg = $(this).siblings('.image-preview')[0];
  if (this.files && this.files[0]) {
    previewImg.src = window.URL.createObjectURL(this.files[0]);
  }
});

$("#addrow").click(function (e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  i++;
  // 克隆第一个可克隆区块
  const clonedBlock = $('.clonable').first().clone();
  // 更新克隆元素内的ID（如果需要保留ID的话）
  clonedBlock.find('.image-preview').attr('id', `upload_${i}`);
  clonedBlock.find('.image-upload').attr('id', `preview_${i}`);
  // 将克隆区块添加到容器中
  clonedBlock.appendTo('.clonable-block');
});

为什么这种方式更好？ #

1. 无需同步ID：通过DOM相对关系（兄弟元素）找到预览图，彻底避免了ID不匹配的问题。
2. 性能更优：事件委托只需要绑定一次，不需要每次克隆都给新元素绑定事件。
3. 代码更健壮：即使后续修改DOM结构，只要保持上传框和预览图的兄弟关系，代码依然能正常工作。

如果你坚持要保留ID绑定的方式（不推荐） #

如果一定要用ID关联，需要把当前的i值固化到onchange的字符串中，而不是引用全局变量：

$("#addrow").click(function (e) {
  e.preventDefault();
  i++;
  const clonedBlock = $('.clonable').first().clone();
  const previewId = `upload_${i}`;
  const uploadId = `preview_${i}`;
  
  clonedBlock.find('img').attr('id', previewId);
  const uploadInput = clonedBlock.find('input[type="file"]');
  uploadInput.attr('id', uploadId);
  // 用模板字符串把当前i值写入事件代码
  uploadInput.attr('onchange', `document.getElementById('${previewId}').src = window.URL.createObjectURL(this.files[0])`);
  
  clonedBlock.appendTo('.clonable-block');
});

但这种方式依然依赖ID，维护性和健壮性不如事件委托的方案。

内容的提问来源于stack exchange，提问作者Mustafa Işık