Browse and set img src using javascript/JQuery in Asp.net mvc 4

Question

I have a <img/> tag in my .cshtml page..

<img id="ImageID" alt="" width="100%" height="100%" />

I need to set src attribute dynamically by selecting the image file path using file control.

I tried the following code in my Js page, but it is not working.

var image_path = $("#fileControl").val();

$("#ImageID").attr('src', 'url(' + image_path + ')');

Please help!

Thanks.

Why not do it like that? $("#ImageID").attr('src', $("#fileControl").val());
You're saying that you're setting it dynamically, which suggests to be that you are actually needing a live event rather than .val(). Otherwise you could just set the javascript with your razor anyway, in the same way you're setting the #fileControl value
@Cris yes. I tried to alert the image_path. It is showing as c:/documents/.../image.jpg. it is reflecting in tag like this. <img id="drawAreaImg" style="width: 100%; height: 100%;" src="C:/Users/james.s/Desktop/pics/background.jpg" />. I can see the image while placing the img tag in ordinary html page. but it not reflecting in my application.
To check, I tried following codes in my .cshtml page. 1. <img id="drawAreaImg" style="width: 100%; height: 100%;" src="~/Images/background.jpg" /> 2. <img id="drawAreaImg" style="width: 100%; height: 100%;" src="c:/Users/james.s/Desktop/pics/kopieren/background.jpg" /> 2nd one didnt work.

danrichardson · Answer 1 · 2013-02-22 11:25:35Z

up vote 0 down vote

To change it to a live event, so that it changes as when your #fileControl value changes, do:

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

...but obviously the above may change slightly (on, bind, live), depending on you jQuery version

edited Feb 22 at 11:25

answered Feb 21 at 12:37

danrichardson
1,1141920

	i was able to set img src in when it is in html page. but i am having the <img/> tag in .cshtml page. How to resolve path in mvc 4? – james jebastin Feb 21 at 12:47
	Just to check i hard coded the img tag in my .cshtml page. 1. <img id="drawAreaImg" style="width: 100%; height: 100%;" src="~/Images/background.jpg" /> 2. <img id="drawAreaImg" style="width: 100%; height: 100%;" src="c:/Users/james.s/Desktop/pics/kopieren/background.jpg" /> 2nd one didnt work. – james jebastin Feb 21 at 12:58
	as you suggested i tried adding 'file://' before the URL. when i place the code in .html page, it works. But when i placed it in .cshtml page it didn't. I took the following code from my IE8's Developer tools source code. <img id="ImageID" style="width: 100%; height: 100%;" src="file:///C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"/> Any issues with the URL??? – james jebastin Feb 25 at 11:41

1 Answer