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

Posted 2023-05-08

【中文标题】在弹出窗口上预览图像，无法正确显示

【英文标题】：Preview image on popover, not displaying correctly

【发布时间】：2018-01-29 04:07:40

【问题描述】：

谁能帮助我进行弹出图像预览，问题是悬停图像预览时不会显示/更新所选图像。

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

正如你在下面看到的，当我将第一张图片悬停时，它给了我正确的图片

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

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

这是我的弹出框代码

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

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

【问题讨论】：

你能做一个工作的sn-p吗

您的 html 无效（两个文本框都生成 id="RawImage"）。但是还有很多其他问题，因为您为同一属性生成 2 个表单输入（没有对第二个等进行验证）

嗨@Redo 你能检查一下jsfiddle.net/re0824c/368c3h3p

@RE0824C 弹出框未触发

@Redo 试试这个jsfiddle.net/re0824c/368c3h3p/5

【参考方案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%"/>'
                
            ) 

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