javascript - 第二次单击浏览器文件按钮时上传图像

标签 javascript html asp.net-mvc

每当我在图像输入上上传图像时,图像都不会显示。

但是每当我第二次单击浏览器文件按钮时,它会立即显示上传的图像。

代码如下:

<html>
<head>
</head>
<body>
    @Html.BeginForm()
    {
            <div>
                <img id="UserImage" alt="Image Section" src="" style="width: 148px; height: 148px" />
                @Html.TextBoxFor(m => m.Image, new { @type = "file", @onclick = "ImageUploader(event)" })
            </div>
    <div>
        <input type="submit" />
    </div>
    }
    <script>
        var ImageUploader = function (e) {
            var input = e.target;
            var reader = new FileReader();
            reader.readAsDataURL(input.files[0]);
            reader.onload = function () {
                var UIHTML = $('#UserImage')[0];
                UIHTML.src = reader.result;
            }
        }
    </script>
</body>
</html>

最佳答案

尝试将@onclick = "ImageUploader(event)"更改为@onchange = "ImageUploader(event)"

关于javascript - 第二次单击浏览器文件按钮时上传图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40736743/

相关文章:

javascript - sails -mongo : many to many relationship is not working in my app. 按照文档仍然给出空数组

javascript - 为什么要求总是返回带有新内部引用的新对象

javascript - 在 Kineticjs 中添加图像的属性样式

javascript - 将大型参数化数据集作为 GET 请求发送

javascript - 使用 JQuery 动态加载 ASP.NET MVC 局部 View

javascript - 这段代码有什么问题?为什么它不像我希望的那样工作..?

c# - 如何在利用 Orchard CMS 的 Web 应用程序中使用多个数据库?我应该如何在 settings.txt 文件中指定相同的数据库?

c# - 具有基于数据库值的动态连接字符串的存储库模式

javascript - 当 DIV 处于 View 中时,我将如何编写一个脚本来控制页面的各个方面?

javascript - 尝试使用 ajax 将 100mb 字节数组从 js 发送到 c# 时出错