Replace image with posted image 1

[Craftor]

Hi all

I currently have a file input box on my form that a user will use to select an image. When the user clicks 'Browse' and selects an image, I'd like to use that posted image as the source for an <img> tag on the page.

Is this at all possible to do and, if so, how?

Thanks as always


Craftor

 

[BillyRayPreachersSon]

The code I gave for this thread back in 2003 should work for you. Instead of setting the background of the page, you would jst set the source of an image instead.

thread216-728409

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Craftor]

Hi Dan

Thanks for the response. This seems to be what I am looking for but I'm not sure from where I would call the method. I need to have the image change when the user selects a file, so I've put it in the onclick event of the file input.

function changeImage()
{
	var bgFilename = document.getElementById('inpImage').value;
	if (bgFilename != '')
	{
		bgFilename = 'file:///' + escape(bgFilename.split('\\').join('/'));
		bgFilename = bgFilename.split('%3A').join(':');
		var oImage = document.getElementById("imgView");
		oImage.src = bgFilename;
	}
};
<input type="file" id="inpImage" name="inpImage" runat="server" class="uploadtext" onclick="javascript: changeImage();">

The problem is that this fires as soon as the user clicks the Browse button - before the user selects the file. Is there any way to make the method "wait" until a file has been selected?

Thanks as always


Craftor

 

[tsuji]

><input type="file" id="inpImage" name="inpImage" runat="server" class="uploadtext" onclick="javascript: changeImage();">

Runat server?! that most probably can't do. Try this?
[tt]<input type="file" id="inpImage" name="inpImage" class="uploadtext" onclick="changeImage();">[/tt]

- tsuji

 

[Craftor]

Hi tsuji

I'm using ASP.NET so I need the runat='server' to be able to access the value from the code behind file.

As far as I know - this shouldn't affect the method being called (if I put a simple alert(1); statement in the method, it does show the message box) - someone please correct me if I am wrong?

Thanks as always

Craftor

 

[BillyRayPreachersSon]

but I'm not sure from where I would call the method

The code I had in that post had a button (NOT the file input button) which called the "useChosenBG" function. You should have something similar. You cannot tie it in to the file control, AFAIK (unless it has an onchange event, but I'm not entirely sure it does).

Of course, obviously, you cannot choose to preview an image until you've selected one.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsuji]

Craftor,
If it is asp.net, maybe you would better off by posting the question to asp.net dedicated forum?

http://www.tek-tips.com/threadminder.cfm?pid=855

- tsuji

 

[Craftor]

Thanks Dan it just needed to be in the onchange event





Craftor