如何使用FileReader在JS中添加圖像疊加層？

Question

到目前為止，我已經設法在我的JS上獲得2張圖片。 但是我無法在其他圖像之上獲得1圖像。 我知道它通常可以在具有“ Z”索引的css上使用，但是由於FileReader讀取了我的圖像，因此將它們添加到了JS中。

問題：為了使圖像位於我的代碼的另一個圖像之上，我必須更改什么，因為我非常確定它幾乎完成了，但是我根本找不到錯誤...

我的JS：

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

                    reader.onload = function(event) {
                        $($.parseHTML('<div>')).attr('class', 'position-relative')
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('display','inline-block')
                            .css('position','relative !important')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<img>')).attr('src', event.target.result)
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('display','inline-block')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<div>')).attr('class', 'position-absolute')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<img>')).attr('src', "/x.png")
                            .attr('height','80px')
                            .addClass("")
                            .css('display','inline-block')
                            .appendTo(placeToInsertImagePreview);
                    }

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

            }

我的HTML：

                <div id="form1">
                    <input value="" type="file" id="images" name="images[]" accept="image/*" multiple />
                    <div id="previewHolder" data-item-id-div="" multiple="" class="position-relative">
                        <div class="position-absolute delete-image">
                            <img class="image-deletepreview" height=80px style="margin-right: 10px;" src="/x.png" />
                        </div>
                    </div>
                </div>

Answer 1

所以我將我的JS代碼更改為1襯里：

                      reader.onload = function(event) {
                        $($.parseHTML('<div>')).attr('class', 'position-relative')
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('display','inline-block')
                            .css('position','relative !important')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<img>')).attr('src', event.target.result)
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('display','inline-block')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<div>')).attr('class', 'position-absolute')
                            .appendTo(placeToInsertImagePreview);
                        $($.parseHTML('<img>')).attr('src', "/x.png")
                            .attr('height','80px')
                            .addClass("")
                            .css('display','inline-block')
                            .appendTo(placeToInsertImagePreview);
                    }

對此：

                     reader.onload = function(event) {
                        $('<div class="position-relative" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
                            '<img alt="" src='+event.target.result+' style="height:200px;width: 100%; display: inline-block;">' +
                            '<div class="position-absolute" style="top: 0;right: 0;">' +
                            '<img src="/x.png" class="image-deletepreview" style="height: 20px; display: inline-block;"></div></div>')
                            .appendTo(placeToInsertImagePreview);

                    }

我只是將Div更改為Position 0，它就像一個吊飾一樣工作。