faqts : Computers : Programming : Languages : JavaScript : Images

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

4 of 5 people (80%) answered Yes
Recently 4 of 5 people (80%) answered Yes

Entry

How can a user browse for an image on their harddrive, and have it preview on the page

May 8th, 2004 17:24
Paul Plato, Rhonda Carrigan,


Try this:
<html>
<head>
<title></title>
<script>
	function showFile()
	{
		holder.innerHTML='<img id="viewer" src="" 
onresize="picSized();">';
		viewer.src=filename.value;
	}
	function picSized()
	{
		var wPerc=viewer.width/document.body.clientWidth;
		var hPerc=viewer.height/document.body.clientHeight;
		if(wPerc>1||hPerc>1)
		{
			if(wPerc>hPerc)
			{
				var oldWidth=viewer.width;
				var wFac=(viewer.width*(wPerc-0.85));
				viewer.width=viewer.width-wFac;
				viewer.height=viewer.height*
(viewer.width/oldWidth);
			}
			else
			{
				var oldHeight=viewer.height;
				var hFac=(viewer.height*(hPerc-0.85));
				viewer.height=viewer.height-hFac;
				viewer.width=viewer.width*
(viewer.height/oldHeight);
			}
		}
	}
</script>
</head>
<body>
	<input id="filename" type="file"><input type="button" 
onclick="showFile();" value="View Picture"><br>
	<span id="holder"><img id="viewer" src="" onresize="picSized
();"></span>
</body>
</html>
Cordially,
Paul Plato