Changing Image Src from JavaScript : The Official Microsoft ASP.NET Forums

Reply

mchlSync

Member

201 Points

Changing Image Src from JavaScript

Nov 07, 2006 05:43 AM|LINK

Could anyone please check the code?
It's working fine normally.. but It doesn't work if we run this code in IIS.
Actually, Im working on one ASP.NET Project. There is one page that a user allow to browse the image from their hard disk and upload this image to the Server. Everything is working fine except displaying the image that the user selected on IMG tag..

It would be great if anyone can help me to fix this code..

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META http-equiv="Pragma" content="no-cache">
<title>Image Src</title>
<script lang="javascript">
 function changePic(imgId,strPath)
 {
         var o = document.getElementById(imgId);
	 var s = new String(strPath);
	 s = s.replace("\\","/");
	 o.src = "file:///" + s;    
 }
 
</script>
</head>
<body>
<IMG id=img1 height=85 src="ATT00199.jpg" width=70 border=0> </A>
<INPUT id="filBrowse" type="file" onchange="changePic('img1',this.value)"
	size="5" name="filBrowse" width="10"><BR>	
</body>
</html>

Thanks in advance.

(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net

Reply

imran.nathan...

Contributor

4615 Points

836 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 09:25 AM|LINK

what you could do is simply put the image tag in a DIV & then change the innerHTML property of the div as follows

in the javascript use

var path ="/MY/images/IMG.jpg";
document.getElementById("DIV1").innerHTML="<img src='"+path+"'/>";

Reply

LudovicoVan

Star

9692 Points

1935 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 10:13 AM|LINK

mchlSync
It's working fine normally.. but It doesn't work if we run this code in IIS.
[...] There is one page that a user allow to browse the image from their hard disk and upload this image to the Server

Your code can work locally but, for security reasons, the file: path won't work from a web server, that is from a page served over http:.

-LV

Reply

mchlSync

Member

201 Points

43 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 11:09 AM|LINK

Thanks.
Actually, I'm working on ASP.NET project for internal use. There is one page called Employee Details that allows the users to enter new profile or update the existing profile. The users is able to update Employee Photo too. So, The updated images should be show in Image control as soon as the user choose new photo.

The coding that I show above is working fine in IE6. but not on other.. :(

Any Idea?

Thanks.

(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net

Reply

imran.nathan...

Contributor

4615 Points

836 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 01:14 PM|LINK

I am sure that you either store the photo path or the photo itself in the database.......................so first the update to the databse is required.....this cannot be done by javascript....but you want an effect that the image has changed on client side............use Microsoft's AJAX i.e.in an updatepanel put the image control & after the upload call a trigger for a pratial post back of the update panel.

Reply

RoamingLlama

Member

220 Points

40 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 02:33 PM|LINK

Hello,

This is very simple to do. I have re-writen your code here:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <META http-equiv="Pragma" content="no-cache">
    <title>Image Src</title>
    <script lang="javascript">
      function changePic(imgId,strPath) {
        var path = new String(strPath);
        path = path.replace("\\","/");
        path = "file:///" + path;
        if(document.getElementById){
          image = document.getElementById(imgId);
          image.setAttribute("src",path);
        }
      }
    </script>
  </head>
  <body>
    <img id="img1" height="85" src="ATT00199.jpg" width="70" border="0" /><br />
    <input id="filBrowse" type="file" onChange="changePic('img1',this.value)" size="5" name="filBrowse" width="10" />
  </body>
</html>

This code works in Firefox and IE.

Thanks,
Dan

Reply

e_screw

All-Star

19530 Points

3894 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 05:57 PM|LINK

As LudovicoVan said, you need to virtual path, to access the image file. File path wont work when accessing from web server.

Thanks

Mark post(s) as "Answer" that helped you

Electronic Screw
Website||Blog||Dub@i.net

Reply

RoamingLlama

Member

220 Points

40 Posts

Re: Changing Image Src from JavaScript

Nov 07, 2006 07:20 PM|LINK

I was under the impression that this would be running locally on his machine...in which case the above code that I posted would work.

Thanks

Thanks,
Dan

Reply

mchlSync

Member

201 Points

43 Posts

Re: Changing Image Src from JavaScript

Nov 08, 2006 03:20 AM|LINK

Thank you all.

>>As LudovicoVan said, you need to virtual path, to access the image file.

I guess There won't be no way to get the virtual path because the user is allowed to select any photo file in his/her machine for changing the Employee Photo.

@ RoamingLlama

Sorry. man. I have tested your code in local IIS. It's not working. I tested as the following.

Copy your code.
Paste it in notepad
Save it as htm ext
Put this file into one of my existing virtual directory
Run this file from localhost
Click "Browse" button
Select one JPG file
[ not working ]
Try to repeat step 6 to 7
[ not working ]

As I said in previous thread, I need to deploy this project on Internal Web Server. So, it should work on Web Server also.

@LudovicoVan

>>Your code can work locally but, for security reasons, the file: path won't work from a web server, that is from a page served over http:.

As I need to use this project within my office, all users who are using this project can be trusted.

Do I need to change the security setting of IIS?

Thanks so much.

(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net

Reply

LudovicoVan

Star

9692 Points

1935 Posts

Re: Changing Image Src from JavaScript

Nov 08, 2006 09:13 AM|LINK

Hello Michael,

> As I need to use this project within my office, all users who are using this project can be trusted.

It is the site to be trusted by user systems, not the reverse. Also, you were actually replacing the first back-slash only. Anyway...

Anyway, you know, I have tried it on IE6/Win98 and IE6/WinXP+SP2 and it *works*! Didn't even need to touch my security settings, but if IE7 complains, then you might try to add the site to the trusted list. However, it doesn't work in FX, nor I guess in any non-IE browser.

I have simplified the script a bit, since the replace stuff is unneeded, but have added some error handling. You can see it live here: http://julio.diegidio.name/Sandbox/LocalBrowse.htm

I only have one final doubt, that is that it works for me because it is a plain html page, not an .aspx page. In that case, either you again might try by trusting the site in IE, or you might work-around it with an IFRAME.

Hope this helps, and please let me know if it worked for you! Thanks. -LV

Edited by LudovicoVan on Nov 08, 2006 09:29 AM
Edited by LudovicoVan on Nov 08, 2006 03:05 PM

Changing Image Src from JavaScript RSS

13 replies

mchlSync

Changing Image Src from JavaScript

imran.nathan...

Re: Changing Image Src from JavaScript

LudovicoVan

Re: Changing Image Src from JavaScript

mchlSync

mchlSync

Re: Changing Image Src from JavaScript

imran.nathan...

Re: Changing Image Src from JavaScript

RoamingLlama

Re: Changing Image Src from JavaScript

e_screw

Re: Changing Image Src from JavaScript

RoamingLlama

Re: Changing Image Src from JavaScript

mchlSync

Re: Changing Image Src from JavaScript

LudovicoVan

Re: Changing Image Src from JavaScript

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft