Javascript 如何上载多个图像并预览所有上载的图像

这段代码适用于单个图像，但我需要多个图像，所以请帮助我更改这段代码

如果要选择多个图像文件并在dom上显示它！然后你可以这样做：
我想这就是你要找的

HTML:



JS:


$（函数（）{
//浏览器中的多图像预览
var imagesPreview=函数（输入，放置到插入图像预览）{
if（input.files）{
var filesamunt=input.files.length；
对于（i=0；i
为什么？您不能这样做的原因是什么？它工作正常，但输入值仅获取第一个图像数据，如何解决该问题哪个输入值？请描述。您在input.files中有一个选定文件的数组
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                <div class="col">
                    <div><img id="img1" src="" alt="your image" style="max-width:180px;" /><output id=”result” ></div>
                    <div><input id="img11" onchange="readURL(this);" type="file"  name="Image1" id="" style="padding:10px; background:#2d2d2d;" ></div>
                </div>

                <div class="col">
                    <div><img id="img2" src="" alt="your image" style="max-width:180px;" /><output id=”result” ></div>
                    <div><input id="img22" onchange="readURL(this);" type="file"  name="Image1" id="" style="padding:10px; background:#2d2d2d;" ></div>
                </div>


            </div

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

<script>

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

</script>