Javascript 预览popover上的图像，未正确显示

有人能帮我做popover图像预览吗？问题是悬停时图像预览无法显示/更新所选图像

这是我的字段，当鼠标悬停时，选定的文件图像应显示在popover上。

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

但是，当我悬停到下一张图片时，它仍然会显示上一张图片，而下一张图片应该是沙漠图片

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

这是我的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>

形象
@TextBoxFor（m=>m.RawImage，新的{Class=“form control”，Placeholder=“Image”，type=“file”}）
@Html.ValidationMessageFor（m=>m.RawImage，null，新{Class=“text danger”}）
形象
@TextBoxFor（m=>m.RawImage，新的{Class=“form control”，Placeholder=“Image”，type=“file”}）
@Html.ValidationMessageFor（m=>m.RawImage，null，新{Class=“text danger”}）

---

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

我已经找到了一个解决方案，但是有一个延迟

我认为问题在于reader.onload，它在更改img src之前首先返回img容器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%"/>'
                }
            }) 

$（'.example-popover'）.popover({
触发器：“悬停”，
容器：'主体'，
是的，
位置：'底部'，
内容：功能（）{
var x=$（this.nexist（'div'）。find（'#RawImage'）；
var imgByte=''；
如果（x[0]。文件（&x[0]。文件[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'previmg'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（x[0].files[0]）；
}
返回“”
}
}) 

---

谢谢大家！希望能为大家提供参考

如果html无效（两个文本框都会生成

id=“RawImage”

），能否生成一个工作代码段。但是还有很多其他的问题，因为你为同一个属性生成了两个表单输入（第二个没有验证等等）Hi@Redo你能检查一下@RE0824C吗popover不是triggering@Redo试试这个