弹出窗口上的预览图像未正确显示

Question

任何人都可以帮助我进行弹出图像预览，问题是悬停图像预览不会 display/update 所选图像。

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

如下图所示，当我将鼠标悬停在第一张图片上时，它给出了正确的图片

但是当我将鼠标悬停在应该给我一张沙漠图像的下一张图片时，它仍然显示上一张图片

但是当我再次悬停它时它会给我正确的输出

这是我的弹出代码

$('.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>

我希望你能告诉我如何在弹出窗口上预览图像。谢谢

Answer 1

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

我认为问题出在 reader.onload 它 returns img-container html 在更改 img src 之前。

这就是我所做的

$('.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%"/>'
                }
            })

谢谢大家！希望能给大家一个参考！

弹出窗口上的预览图像未正确显示

Preview image on popover, not displaying correctly

javascript

jquery

asp.net-mvc

twitter-bootstrap

popover