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更改为位置0，它像吊饰一样工作。

如何使用FileReader在JS中添加图像叠加层？

1 个答案: