javascript image preview

[slrobinson1983]

hello all. i've bee learning php for the last couple of weeks while designing a site but i am now frequently running into situations where i need to use javascript. i have a page where i want a user to browse for a pic with a file field and i would like the image to be displated as a preview before the user uploads the pic. i found this script...

function showLocalImage(imgname)
{
imgname = imgname.replace(/\\/g,"/");
imgname = imgname.replace(/\'/g,"\\'");
content = "<img src=\"" + String(imgname) + "\" border=\"0\" height=\"150\" weight=\"150\">";
eval('document.all("imagepreview").innerHTML=\" + content +"'");
document.all.imagepreview.style.visibility ='visible';
}

...but it dosent seem to be working for me, i'm using IE7 by the way. any help would be appreciated. thanks in advance!

[Agarsia]

Firstly the Code in eval() isn't correct:

eval('document.documentGetElementById("imagepreview").innerHTML= content;');

Secondly if this is pure JavaScript, it will not work, because many browsers do not allow Javascript to access local resources. Error:

Not allowed to load local resource: file:///C:/fakepath/DSC00053.JPG

[slrobinson1983]

i found this script and it seems to be working fine for me. can anybody tell me how to alter this so that it dosent alter the dimensions of the image. id like to have it previewed in its original size. thanks for the help all.

<script type="text/javascript">
var maxWidth=100;
var maxHeight=100;
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var outImage="previewField";
var defaultPic="spacer.gif";

function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
</script>

[Agarsia]

<script type="text/javascript">
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var outImage="previewField";
var defaultPic="spacer.gif";

function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;

function applyChanges(){
var field=document.getElementById(outImage);

field.src=globalPic.src;
}
</script>

this should work

[slrobinson1983]

thanks agarsia that worked great