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
