Changing Image Src from JavaScript

Home ›

ASP.NET Forums » General ASP.NET » Client Side Web Development » Changing Image Src from JavaScript

Shortcuts

Previous Next

Changing Image Src from JavaScript

Last post 11-09-2006 10:30 PM by mchlSync. 13 replies.

Sort Posts:

Changing Image Src from JavaScript

11-07-2006, 1:43 AM

Contact

Loading...
mchlSync
Joined on 09-16-2005, 9:02 AM
Singapore
Posts 43
Points 201

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

Best Regards,
Michael Sync

Microsoft WPF & Silverlight Insider
Blog : http://michaelsync.net

Filed under: <Img> javascript in asp.net

Re: Changing Image Src from JavaScript

11-07-2006, 5:25 AM

Contact

Loading...
imran.nathani
Joined on 04-07-2006, 9:32 AM
Toronto,Canada
Posts 836
Points 4,615

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+"'/>";

Let the game begin!!

Barcode image generation made easy.
Writing an ActiveX Control in C#
Generating Relational Data From XML Datatype -Part 1
Generating Relational Data From XML Datatype -Part 2
Dynamic XML From SQL Server

Re: Changing Image Src from JavaScript

11-07-2006, 6:13 AM

Contact

Loading...
LudovicoVan
Joined on 12-02-2004, 10:01 AM
The World's End
Posts 1,725
Points 8,569

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

Julio P. Di Egidio
Software Analyst Programmer
=BUSINESS AND SCIENTIFIC=
=SOFTWARE DEVELOPMENT=
http://julio.diegidio.name

(Peace X Love] = [++1)

Re: Changing Image Src from JavaScript

11-07-2006, 7:09 AM

Contact

Loading...
mchlSync
Joined on 09-16-2005, 9:02 AM
Singapore
Posts 43
Points 201

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

Best Regards,
Michael Sync

Microsoft WPF & Silverlight Insider
Blog : http://michaelsync.net

Re: Changing Image Src from JavaScript

11-07-2006, 9:14 AM

Contact

Loading...
imran.nathani
Joined on 04-07-2006, 9:32 AM
Toronto,Canada
Posts 836
Points 4,615

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.

Re: Changing Image Src from JavaScript

11-07-2006, 10:33 AM

Contact

Loading...
RoamingLlama
Joined on 11-06-2006, 6:05 PM
Akron, OH
Posts 40
Points 210

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

Re: Changing Image Src from JavaScript

11-07-2006, 1:57 PM

Contact

Loading...
e_screw
Joined on 10-20-2004, 1:22 PM
Women, Guitar, Russia, Billiards, Nature, .NET
Posts 3,893
Points 19,488

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

Re: Changing Image Src from JavaScript

11-07-2006, 3:20 PM

Contact

Loading...
RoamingLlama
Joined on 11-06-2006, 6:05 PM
Akron, OH
Posts 40
Points 210

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

Re: Changing Image Src from JavaScript

11-07-2006, 11:20 PM

Contact

Loading...
mchlSync
Joined on 09-16-2005, 9:02 AM
Singapore
Posts 43
Points 201

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

Best Regards,
Michael Sync

Microsoft WPF & Silverlight Insider
Blog : http://michaelsync.net

Re: Changing Image Src from JavaScript

11-08-2006, 5:13 AM

Contact

Loading...
LudovicoVan
Joined on 12-02-2004, 10:01 AM
The World's End
Posts 1,725
Points 8,569

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

Julio P. Di Egidio
Software Analyst Programmer
=BUSINESS AND SCIENTIFIC=
=SOFTWARE DEVELOPMENT=
http://julio.diegidio.name

(Peace X Love] = [++1)

Re: Changing Image Src from JavaScript

11-08-2006, 5:20 AM

Contact

Answer

Loading...
LudovicoVan
Joined on 12-02-2004, 10:01 AM
The World's End
Posts 1,725
Points 8,569

Below is the code, in case my site goes down... ;) -LV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>julio.diegidio.name - SandBox / LocalBrowse</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <form action="" onsubmit="return false">

<p>Select: <input id="FileBox" type="file"
   onchange="fileChange()" /></p>

<p>Preview: <img id="FileImg" src="" style="width: 10em"
   onload="fileLoad()" /></p>

<p><span id="FileDsp"><em>Waiting...</em></span></p>

      </form>
      
      <script type="text/javascript">
      /*<![CDATA[*/
var fileRef = -1;

function fileChange() {
   fileRef = setTimeout("fileErr()", 100);
   
   var fileBox = document.getElementById("FileBox");
   var fileImg = document.getElementById("FileImg");
   var fileDsp = document.getElementById("FileDsp");
   
   // Keep order!
   fileDsp.innerHTML = "<em>Loading...</em>";
   
   fileImg.src = fileBox.value;
   //
}

function fileErr() {
   if(fileRef < 0) return;
   
   var fileDsp = document.getElementById("FileDsp");
   
   fileDsp.innerHTML = "<em>Error: unsupported or invalid format!</em>";
}

function fileLoad() {
   fileRef = -1;
   
   var fileImg = document.getElementById("FileImg");
   var fileDsp = document.getElementById("FileDsp");
   
   fileDsp.innerHTML = fileImg.src;
}
      /*]]>*/
      </script>
      
   </body>
</html>

Julio P. Di Egidio
Software Analyst Programmer
=BUSINESS AND SCIENTIFIC=
=SOFTWARE DEVELOPMENT=
http://julio.diegidio.name

(Peace X Love] = [++1)

Re: Changing Image Src from JavaScript

11-08-2006, 1:23 PM

Contact

Loading...
RoamingLlama
Joined on 11-06-2006, 6:05 PM
Akron, OH
Posts 40
Points 210

Julio,

At first this code did not work in IE7 but as you mentioned I had to add your site to my "Trusted Sites" list.

Michael,

The solution that Julio suggested would be good for the job as long as everyone uses IE and (if its IE7) you want to add the site to the "trusted sites" list. However, I would probably lean towards an earlier suggestion to use Microsoft AJAX to accomplish this. First write a script to upload the image to either a database or to the file system on the server somewhere. After that is working implement the necessary controls (and a bit of code) on the Web Form to accomplish displaying the image. Then, just AJAX enable it. Remember that you will want to have a way to automatically delete the temporary images that get stored on the server for preview purposes (probably have them in a temp directory then on each new session simply clear out the temp folder). This process should run rather smoothly and swiftly since it is running on the local intranet.

Thanks,

Dan

Thanks,
Dan

Re: Changing Image Src from JavaScript

11-09-2006, 5:32 AM

Contact

Loading...
LudovicoVan
Joined on 12-02-2004, 10:01 AM
The World's End
Posts 1,725
Points 8,569

RoamingLlama:
The solution that Julio suggested would be good for the job as long as everyone uses IE and (if its IE7) you want to add the site to the "trusted sites" list. However, I would probably lean towards an earlier suggestion to use Microsoft AJAX to accomplish this.

The question was indeed how to build a client-side preview in the context of an Intranet, where you have full control over client software, and you were one of those underlying this since the beginning, if I am not wrong. In case one has to program for the Internet, this wouldn't of course be a feasible approach, as I have myself said since the beginning.

And, I wouldn't anyway suggest Ajax, because: 1st) the functionality to realize here was a local file browse with preview, and Ajax doesn't solve this, you stil have to upload the file first, and that is not a local preview anyway; 2nd) and even more important, tell an asker the basic approach first, that is upload the image and show it in a round-trip. Ajax is a further step. Ajax is always a further step...

Regards. -LV

Julio P. Di Egidio
Software Analyst Programmer
=BUSINESS AND SCIENTIFIC=
=SOFTWARE DEVELOPMENT=
http://julio.diegidio.name

(Peace X Love] = [++1)

Re: Changing Image Src from JavaScript

11-09-2006, 10:30 PM

Contact

Loading...
mchlSync
Joined on 09-16-2005, 9:02 AM
Singapore
Posts 43
Points 201

Thank you so much. LudovicoVan and RoamingLlama.

Your code works very wells after adding my internal web server url in trusted site list. but firefox. In order to run that code in Firefox, I heard that I need to have NoScript Extension for adding my internal web server in trusted site. I haven't tested yet.

Thanks.

Ajax? Yeah. It would be good. But MS Altas might not be a solution for me since I'm using ASP.NET 1.1. So, maybe I will try with normal javascript and XmlHttpRequest object. I was thinking whether uploading image file for each preview would be good or not. but ya. my project is just for internal used only. I will try and will let you know..

Thanks so much again. all of you.

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

Best Regards,
Michael Sync

Microsoft WPF & Silverlight Insider
Blog : http://michaelsync.net

Page 1 of 1 (14 items)

RSS Available