多图片输入预览异常：仅首个输入框可正常显示图片预览

嘿，我知道问题出在哪了！你现在的代码里所有文件输入框的预览都硬绑定到了同一个#blah图片元素上，ID在HTML中是唯一标识，所以不管你操作哪个输入框，只会更新这一张图，其他输入框对应的预览区域根本没被处理到。下面给你两种可行的解决方案：

方案一：用数据属性绑定输入框与预览图 #

这种方式更灵活，不管输入框和预览图的位置关系如何，只要通过data-preview属性关联对应ID就行。

修改后的HTML： #

<input type='file' onchange="readURL(this);" data-preview="preview1" />
<img id="preview1" src="http://placehold.it/100x100" alt="预览图1" />

<input type='file' onchange="readURL(this);" data-preview="preview2" />
<img id="preview2" src="http://placehold.it/100x100" alt="预览图2" />

<input type='file' onchange="readURL(this);" data-preview="preview3" />
<img id="preview3" src="http://placehold.it/100x100" alt="预览图3" />

<input type='file' onchange="readURL(this);" data-preview="preview4" />
<img id="preview4" src="http://placehold.it/100x100" alt="预览图4" />

修改后的JavaScript： #

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        // 获取当前输入框绑定的预览图ID
        var previewId = input.getAttribute('data-preview');
        reader.onload = function (e) {
            // 找到对应预览图并更新src
            document.getElementById(previewId).setAttribute('src', e.target.result);
            // 如果你习惯用jQuery，也可以写成：$('#' + previewId).attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

方案二：利用DOM相邻元素关联 #

如果你的输入框和预览图是一一相邻的结构（比如放在同一个容器里），可以直接通过DOM遍历找到下一个兄弟元素，不用额外加属性。

修改后的HTML： #

<div class="upload-item">
    <input type='file' onchange="readURL(this);" />
    <img src="http://placehold.it/100x100" alt="预览图" />
</div>
<div class="upload-item">
    <input type='file' onchange="readURL(this);" />
    <img src="http://placehold.it/100x100" alt="预览图" />
</div>
<div class="upload-item">
    <input type='file' onchange="readURL(this);" />
    <img src="http://placehold.it/100x100" alt="预览图" />
</div>
<div class="upload-item">
    <input type='file' onchange="readURL(this);" />
    <img src="http://placehold.it/100x100" alt="预览图" />
</div>

修改后的JavaScript： #

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        // 获取当前输入框的下一个兄弟img元素
        var previewImg = input.nextElementSibling;
        reader.onload = function (e) {
            previewImg.setAttribute('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

核心思路就是让每个输入框对应唯一的预览元素，不再所有操作都指向同一个ID的图片。这样每个输入框选择的图片都会更新到自己对应的预览区域里啦！

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