CODEWITHSUNDEEP
javascripthtmlasp.net-mvc
Titti Towel
Titti Towel

Reputation: 121

image uploads at second click on the browser file button

Whenever I uploads image on the image-input, the image did not shows.

But whenever I click second time on the browser file button it shows uploaded image immediately.

Code is given below:

<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>

Upvotes: 1

Views: 111

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

Try to change @onclick = "ImageUploader(event)" to @onchange = "ImageUploader(event)"

Upvotes: 1

Related Questions