How to diaplay an image inside the page before uploading it.

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
sarbas
Forum Commoner
Posts: 64
Joined: Thu Jan 04, 2007 5:51 am

How to diaplay an image inside the page before uploading it.

Post by sarbas »

Hello everybody,

I have a php page in which I used a image upload future. Here the users can upload the image by selecting the file name by using a browse button. Here my problem I want to display the image at the side the of the page before uploading the file into database. Can anyone help.

Regards,
Sarbas.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

At minimum, if possible, that would not involve PHP but Javascript.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

It's totally possible using javascript:

Code: Select all

$(function(){
	$('#fileSelect').change(function(){
		$('#previewPic').attr('src','file://'+$('#fileSelect').attr('value'));
	});
});

Code: Select all

<form method="post" action="">
	<input id="fileSelect" type="file"/>
</form>
<img id="previewPic"/>
My example uses jQuery, but you could do it without. The general principle is to set the src of an img element to the value of the file input form control.
sarbas
Forum Commoner
Posts: 64
Joined: Thu Jan 04, 2007 5:51 am

Post by sarbas »

hi Kieran Huggins,
thansk for your relply. i've used your code. but it's not working.can you give correct syntax for that script.

Hopefully waiting for your reply.
Sarbas
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

To use my code, you'll need to include jQuery: http://jquery.com

...or you can just do what I'm doing, but write it yourself without jQuery.
Post Reply