[HTML5][Jquery][ASP NET MVC] Create uploaded Image's Preview using HTML5 & JQuery on ASP NET MVC's Razor page.

index.cshtml

@model SomeModel

@using (Html.BeginForm("Submit", "Home", FormMethod.Post, new { enctype ="multipart/form-data" }))
{
    @Html.EditorForModel()

    <label for="ImagePreview">Image Preview</label>
    <p>
        <output id="image-box"></output>
    </p>
    <input id="imageFileUpload" name="imageFileUpload" type="file" accept="image/*" value="Browse..."/>        
    <p> <input type="submit" value="Submit"/> </p>
}
<script type="text/javascript">
    $(document).ready(function () {
        $('#imageFileUpload').bind('change', onFileSelected);
    });
    
    function onFileSelected(evt) {
        var uploadedFile = evt.target.files[0];
        
        // Read uploaded file using HTML5 API ( FileReader )
        var fileReader = new FileReader();
        fileReader.onload = function (fileReaderEvent) {
            var imageElement = ['<img src="', fileReaderEvent.target.result, '" title="', uploadedFile.name, '" width=', 320, ' />'].join('');
            $('#image-box').prop('innerHTML', imageElement);
        };

        fileReader.readAsDataURL(uploadedFile);
    }
</script>