Question

我有一个带有img控件的jquery移动页面。

<div data-role="page" id="pageAvitarUpload">
    <div data-role="header">
        <h2 style="font-weight: bold; font-size: .75em;" id="dlgHeader">Choose an Image file</h2>
    </div>

    <div data-role="main" class="ui-content">
        <input type="file" id="fileAvitar" accept="image/*" />

        <div style="width:100%; text-align:center;">
            <p>Preview</p>
            <img id="userImage" src="./images/UserPhoto.png" alt="User Photo" width="90" height="90" style="margin:0 auto; vertical-align:middle;" />
        </div>

        <input type="button" id="btnUploadAvitar" value="Upload" />
    </div>
</div>

我试图通过使用以下代码更新img控件的src来更改输入时设置预览。

$("#fileAvitar").on("change", function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        var _control = $("#userImage");
        reader.onload = function (e) { _control.attr('src', e.target.result); }
        reader.readAsDataURL(this.files[0]);
    }
})

我的代码运行正常，但img永远不会更新。我拉着我留下的小头发因为我知道它一定是愚蠢的东西。更多信息是这个窗口在打开时被调用为对话窗口。

$("#btnAvitar").on("click", function () {
    $(':mobile-pagecontainer').pagecontainer('change', '#pageAvitarUpload', { role: "dialog" });
})

我认为这可能是问题，但即使我从对话中取出它仍然失败了。请帮忙，因为我已经看了好几个小时而且迷路了。我已经阅读了我能找到的每篇文章，并以不同的方式重写了这段代码，但却无法让它发挥作用。

TIA

jquery移动输入文件没有更新img

0 个答案: