JavaScript to Preview a Local Image Before Uploading
Posted by Sree Pillai on October 18th, 2005 under category Internet
Topics: JavaScript, Scripting, Tools
My friend Santhosh asked this question. He has an image upload form in a webpage. User selects an image to upload from the local computer by clicking the browse button. Now, he would like to preview the image from the local computer. Good question.
I liked the question mainly because I had the same question 4 years ago, for an intranet project (IE only). I wrote the script myself (a change from the usual practice of copying from somewhere!). Now all I have to do is to share it with him. Then why not share it with anybody looking for this by posting in the blog? That sounds good to me. So here it goes.
This CSS ID goes to the <head> or CSS include file
.imagepreview { position: relative; visibility: visible; width: 150; height: 150; clip: rect(0,300,300,0);}
Define an ID in the HTML page in an appropriate location to display the preview image
<div id=”imagepreview><img src=”no-preview-image-name” /></div>
In the form file element, add the onchange event
<input type=”file” onchange=”showLocalImage(this.value)” />
This function goes in the <head> tag or in a JavaScript include file.
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’;
}
Disclaimer: I did not test this script in all browsers. You may use this idea, but do not trust the code to work for you! 
7 Responses to “JavaScript to Preview a Local Image Before Uploading”
Leave a Reply
Author Email: sree@teck.in
helpme not eval(‘document.all(“imagepreview”).innerHTML=\”‘ + content + ‘”;’);
Cannot work in FireFox 3. Although I would love to be contradicted because I would like to implementing it for all the major browsers.
FireFox 3 and Safari are not allowing to find out the client full path of the image file. Just the file name and extension.
This works for only IE not for other browsers. Could any one help to solve the same problem for all browsers……….
Thanks in advance
—————–
Anonymous said…
Great little tip – works well in ie 7 (but not in firefox – oh well). The only thing that puzzels me is how it know to maintain aspect ratio when you browse to a portrate or landscape image. Canty see the logic for this – can you enlighted me?
—————–
There is no special trick on how to maintain the aspect ratio of images using the javascript above. Meaning, do it as how you do it using HTML. If you want it relative to it’s width just remove the height attribute. On the other hand, if you want it relative to its height remove the width attribute. That’s it and you’re on. Let me know what you think.
Hi,
Great little tip – works well in ie 7 (but not in firefox – oh well). The only thing that puzzels me is how it know to maintain aspect ratio when you browse to a portrate or landscape image. Canty see the logic for this – can you enlighted me?
Regards
Eadmund
Eadmund@letterbee.com
Hello mr Sreekandakumar Pillai
your blog entry for previewing images localy is helpful but i can’t use this on asp.net so that clents on net could preview their images.
do you think that previewing images on net be possible without activex or anything else like that?
thank you for your help and sorry for my bad english
Jahangir Zinedine
hey..for firefox…i guess in the same lines u can write a grease monkey plugin!