Question

任何人都可以帮助我进行弹出式图像预览，问题是在悬停图像预览时不会显示/更新所选图像。

这是我的字段，悬停时所选的文件图像应显示在弹出框中。

正如您在我悬停第一张图片时所看到的那样，它为我提供了正确的图片

但当我徘徊到下一张应该给我沙漠图像的图像时，它仍会显示上一张图像

然而，当我再次悬停它时，它给了我正确的输出

这是我的popover代码

$('.example-popover').popover({
                trigger: 'hover',
                container: 'body',
                html: true,
                placement:'bottom',
                content: function () {
                    var x = $(this).closest('div').find('#RawImage');
                    if (x[0].files && x[0].files[0]) {
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            $('#img-prview').attr('src', e.target.result);
                        }

                        reader.readAsDataURL(x[0].files[0]);
                    }

                    return $('.img-container').html()
                }

            })

这是我的HTML

<div class="img-container hidden">
        <img id="img-prview" src="#" style="width:50%"/>
    </div>
    <div class="form-group has-feedback">
        <div class="row">
            <div class="col-md-1">
                Image
            </div>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.RawImage, new { Class = "form-control", Placeholder = "Image",type="file" })
                @Html.ValidationMessageFor(m => m.RawImage, null, new { Class = "text-danger" })
                <a href="#"><i class="fa fa-image example-popover"></i></a>
            </div>
        </div>
    </div>
    <div class="form-group has-feedback">
        <div class="row">
            <div class="col-md-1">
                Image
            </div>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.RawImage, new { Class = "form-control", Placeholder = "Image",type="file" })
                @Html.ValidationMessageFor(m => m.RawImage, null, new { Class = "text-danger" })
                <a href="#"><i class="fa fa-image example-popover"></i></a>
            </div>
        </div>
    </div>

我希望你能告诉我如何在popover上预览图像。感谢

Answer 1

我已经找到了解决方案，但它有延迟。

我认为问题是reader.onload在更改img src之前首先返回img-container html。

所以这就是我所做的

$('.example-popover').popover({
                trigger: 'hover',
                container: 'body',
                html: true,
                placement:'bottom',
                content: function () {
                    var x = $(this).closest('div').find('#RawImage');
                    var imgByte = '';
                    if (x[0].files && x[0].files[0]) {
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            $('#previmg').attr('src', e.target.result);
                        }

                        reader.readAsDataURL(x[0].files[0]);
                    }
                    return '<img id="previmg" src="#" style="width:100%"/>'
                }
            })

谢谢大家！希望这可以作为某人的参考！

弹出窗口上的预览图像，无法正确显示

1 个答案: