How to set img tag src in MVC 4?

Question

I have a file input control:

<input type="file" id="fileUploadControl" />

On selecting an image file using this file control the selected image src has to be updated in img tag:

<img id="profileImage" width="80%" height="80%" />

I used the folowing jQuery code to update the src :

$("#fileUploadControl").on('change', function(){
     $("#profileImage ").attr('src', 'url(file://' + $(this).val() + ')');
})

The above code works in ordinary HTML page but when I use this code inside the MVC 4 .cshtml file it didn't work.

What is the reason and how do I overcome this problem?

Answer 1

I have done this in one of my asp.net project,may this helps you

FileUpload control

<asp:FileUpload ID="screenUpload" runat="server" onchange="readURL(this);"/>

Image control

<img width="100" id="imgProjImage" runat="server" src=""/>

Function

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#imgProjImage').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }