如何在上传前预览多个图像多个div-jQuery

我有一个用于上传多个图像的引导模式。当用户单击“添加产品图像”按钮时，它将生成一个新的图像上载输入表单，当用户选择一个图像时，它将立即在上载按钮下方显示一个图像。我的代码运行良好，但我有一个小问题

我的问题： 当用户单击“添加产品图像”按钮时，它将生成一个新的图像上载输入表单，然后选择该图像，并用新图像替换第一个图像。我想显示多个图像

<div class="product-image">
    <div class="form-group">
        <div class="Image-upload">
            <span class="image-option-close">&times;</span>
            <label for="product_images"> Upload Image </label>
            <img src="" id="image"  class="h-100" alt="">
            <input type="file" id="product_images[]" accept="image/*" name="product_images" onchange="readURL(this);">
           </div>
         </div>
       </div>



$(function () {
        $(this).on('click', '#add-product-image', function () {
            var form = '<div class="form-group"><div class="Image-upload"><span class="image-option-close">&times;</span><label for="product_images" class="">Upload Image</label><input type="file" id="product_images" accept="image/*" name="product_images[]" onchange="readURL(this);"></div></div>';
            $('.product-image').append(form)
        });

        $(this).on('click', '.image-option-close', function () {
            var target_input = $(this).parent();
            target_input.remove();
        })
    });

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image')
                    .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

&时代；
上传图像
$（函数（）{
$（此）。在（'单击'，'添加产品图像'）功能（）{
var form='×；上传图像'；
$（'.product image'）.append（表单）
});
$（此）.on（'单击'，'）。图像选项关闭'，函数（）{
var target_input=$（this）.parent（）；
目标_input.remove（）；
})
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#图像”）
.attr（'src'，e.target.result）
};
reader.readAsDataURL（input.files[0]）；
}
}

请查看gif文件

---

我想我理解错了，你的意思是添加jquery处理对吗？这与拉威尔无关，但你为什么给拉威尔贴标签？也许这会有帮助

$（函数（）{
$（此）。在（'单击'，'添加产品图像'）功能（）{
var form='×；上传图像'；
$（'.product image'）.append（表单）
});
$（此）.on（'单击'，'）。图像选项关闭'，函数（）{
var target_input=$（this）.parent（）；
目标_input.remove（）；
})
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var newimage=$（'#image'）.clone（）
.attr（'src'，e.target.result）；
$（'.product image'）.prepend（newimage）
};
reader.readAsDataURL（input.files[0]）；
}
}

&时代；
上传图像

首先，您需要为您的

img

预览使用

class

选择器，而不是

id

——因为

id

对于DOM中的每个

元素都必须是唯一的

其次，要在单击
添加产品图像
后分别预览
每个
图像
，您需要添加其自己的
img
元素，以便我们可以在相关部分使用此输入
img
预览

要获得实际的
img
和最接近的
输入，我们需要使用jQuery
Prev（）
方法

$(input).prev('img.image').attr('src', e.target.result)

现场工作演示：


$（函数（）{
$（此）。在（'单击'，'添加产品图像'，函数（）上）{
var form='×；上传图像
'；
$（'.product image'）.append（表单）
});
$（此）.on（'单击'，'）。图像选项关闭'，函数（）{
var target_input=$（this）.parent（）；
目标_input.remove（）；
})
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（输入）.prev（'img.image'）.attr（'src'，e.target.result）
};
reader.readAsDataURL（input.files[0]）；
}
}

&时代；
上传图像


添加产品图片
感谢您的评论。这是我的错误，我更新了它，但我的主要问题是我不能显示多个图像使用相同的id不是一个好的做法-克隆一个元素没有意义<代码>id的
对于DOM中的每个元素都必须是唯一的。您的新代码正常工作，但这里有一个小问题。你能使用“（this）”函数吗？我想要这种类型的代码$（this）.parent（）.find（'#image'）.attr（'src'，e.target.result）@ShafayetAl Anik您想使用一个
img
preview部分并在同一img中添加更多预览吗？不，我有多个img部分。当我单击添加新图像按钮时，它将生成一个带有新img标记的新输入Tyle=“file”。然后我想在new input type=“file”中选择一个img文件，图像将显示新生成的img标记。我的新生成的标记代码图像