Javascript 如何使用多个输入预览图像？

如何预览从不同输入上传的多个图像

我的设计：

$（“.img”）.change（函数（）{
if（this.files&&this.files[0]）{
var img=此；
var reader=new FileReader（）；
reader.onload=函数（e）{
$（img）.closest（'div.image_container'）.find（'.imageLive'）.attr（'src'，e.target.result）；
};
reader.readAsDataURL（this.files[0]）；
}
});

اضف الصورة
اضف الصورة
您正在将图像附加到每个匹配的
imageLive
元素：

$('.imageLive').attr('src', e.target.result);

大概您只需要最近的
imageLive
元素。将整体结构包装在某种容器中：

<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img" id="img" style="display:none;"/>
        <label for="img" class="img_color">add image</label>
    </div>
    <div class="col-xs-6">
        <img src="{{ asset('cp/assets/images/placeholder.webp') }}" class="imageLive" id="imageLive">
    </div>
</div>

编辑：看起来您还需要捕获对
此
的引用，因为从
文件读取器的回调中上下文会发生更改。您可以将其捕获到一个变量中，以便在回调中使用。例如：


$（“.img”）.change（函数（）{
if（this.files&&this.files[0]）{
var img=此；
var reader=new FileReader（）；
reader.onload=函数（e）{
$（img）.closest（'div.image_container'）.find（'.imageLive'）.attr（'src'，e.target.result）；
};
reader.readAsDataURL（this.files[0]）；
}
});

اضف الصورة
اضف الصورة
请注意，ID对于文档必须是唯一的。您应该将两个元素包装在一个外部元素中，然后使用
最接近的
查找它，然后使用
查找（'.imageLive'）.attr…
将源代码设置为正确的预览。您的代码目前以何种方式不适用于多个图像？前提是一样的，它应该只是一个目标元素的问题。但是如果它在其他方面失败了，那么你也需要识别并解决这个问题。@David它是有效的，但是当我添加到like第一个输入中时，其余的都是相同的图像@异端猴子我如何使id独一无二？比如，给他一个数字或名字？是的，你可以只附加一个数字
“img”+i
，这取决于你如何将新的输入附加到你的DOM。困惑！你的意思是，没有我上面的代码，你的最后一个js代码就可以工作？@Musa：我不知道你在问什么。根据您对上述问题的评论，具体问题是，当您选择图像时，代码正在更新所有图像预览。这是因为更新图像预览的代码行针对的是所有图像预览。您需要只针对一个要更新的图像预览。这是一种方法，使用
closest（）
在正在使用的两个元素之间找到一个公共父元素，然后使用
find（）
在该公共父元素中找到目标元素。@Musa:它以什么方式失败？你能用新的代码更新这个问题吗？我要问的是，我有上面图片中的设计，我有新的输入按钮来添加新的输入和图像框，我需要为用户添加的每个输入指定图像预览：在我上面的js代码中，正如我之前所说，当我预览第一张图片时，所有其他图片都会像第一张和第二张一样预览我需要使每个输入都有自己的image@Musa：在
文件读取器
回调中，此
的上下文似乎不同，我忽略了这一点。您可以在创建回调函数之前将其捕获到变量中，然后在该函数中使用它。我用一个例子更新了答案。
$(this).closest('div.image_container').find('.imageLive').attr('src', e.target.result);