jQuery图片预览问题：table内input无法触发预览的技术问询

嘿，问题的根源很明显——你用的next()方法在这里掉链子了！

为什么table里的input失效？ #

原代码里的$input.next('.img-preview')是找当前<input>的下一个直接兄弟元素，但table结构里：

<td> <input type="file" class="img-control" /> </td>
<td> <img class="img-preview" src="#" /> </td>

<input>和<img>分别在不同的<td>里，它们根本不是直接兄弟关系！next()自然找不到目标图片，预览功能就失效了。而table外的input和img是紧挨着的兄弟元素，所以next()能正常工作。

修复方案：调整选择器，定位到正确的图片元素 #

我们需要换一种方式找到对应预览图：先找到input所在的<tr>，再在这个tr里搜索.img-preview元素。同时还要兼容table外的情况，完整代码如下：

修改后的JavaScript代码

jQuery(document).ready(function() {
  function readURL() {
    var $input = jQuery(this);
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        // 先尝试找当前tr内的预览图，找不到则找下一个兄弟元素
        var $preview = $input.closest('tr').find('.img-preview');
        if (!$preview.length) {
          $preview = $input.next('.img-preview');
        }
        $preview.attr('src', e.target.result).show();
      }
      reader.readAsDataURL(this.files[0]);
    }
  }
  jQuery(".img-control").change(readURL);
});

核心修改点

• $input.closest('tr')：找到当前input所在的最近的<tr>父元素（table内的input会命中，table外的会返回空）
• 如果tr内找不到预览图，就 fallback 到原来的next()方法，兼容table外的情况

这样不管你的input和img是在table的tr里，还是直接在页面上，都能正确触发图片预览了。

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