<input type="file"
name="myImage"
size="30" onChange="previewImage(document.imageTest.myImage,
'replaceMe')"/>
<br>
<img src="clear.gif" name="replaceMe" width="1" height="1"/>
</form>
Problems: Won't work with Mozilla type browsers. Sometimes width and height aren't read. Very large files' sizes aren't read.
The way I came up with this script was that I needed a client-side script for my website customers that would check their image file sizes before uploads, because some folks don't know how to check file properties and were getting errors when server defaults prevented uploads larger than 200 kb.
I learned that it "isn't possible" to get image file sizes with javascript...however,
I know that I HAVE seen scripts that do that, I just can't remember where...
anyhow, I did find a script that would calculate the file size of a page:
http://www.quirksmode.org/js/filesize.html. The thought occurred to me that
if one had a script that would show a preview of an image upload that perhaps
the previous script would include that image file in its calculations.
I found
an image preview script that I liked on
http://weblogs.macromedia.com/cantrell/archives/2004/06/how_to_implemen.cfm.
I don't know much about javascript code, so I experimented with getting the two scripts to work with each other until I came up with the following utility:
| <script language="javascript"> //BEGIN FROM http://weblogs.macromedia.com/cantrell/archives/2004/06/how_to_implemen.cfm var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i; function previewImage(pathField, previewName) { var path = pathField.value; if (path.search(imgRe) != -1) { document[previewName].src = 'file://'+path; //END FROM http://weblogs.macromedia.com/cantrell/archives/2004/06/how_to_implemen.cfm { var img = new Image(); img.src = 'file://'+path; document.write(img.width + ' pixels wide x ' + img.height +' pixels high<br>'+ '<img src=' + img.src + '><br>'); } { // BEGIN FROM: http://www.quirksmode.org/js/filesize.html var size = (document.fileSize)*1; var y = document.images; var imglength = 0; for (i=0;i<y.length;i++) { imglength += (y[i].fileSize)*1; } var total = size + imglength; //uncomment the following to return more page info //var writestring = 'File size HTML: ' + size; //writestring += '\nFile size images: ' + imglength; //writestring += '\nTotal file size: ' + total; // END FROM: http://www.quirksmode.org/js/filesize.html var writestring = 'Image file size: ' + imglength + ' bytes<br>' ; if (imglength < 1) writestring += "<b>NOT APPLICABLE: \nFile too large for this script.</B><BR>"; //if (total > 40000) writestring += "\nFile too large!" + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>'; if (imglength > 40000) writestring += "\nFile too large!" + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>'; //if (total < 40000) writestring += "\nFile size OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>'; //if (imglength >= 1)writestring += "\nFile size OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>'; if (((40000 + imglength)<40000)) writestring +="\nFile size not OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>' ; if (((40000 + imglength)>40000)) writestring +="\nFile size OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>' ; document.write(writestring); } } else { alert("JPG, PNG, and GIFs only!"); } } </script> |
Place the following in the body of your page:
<form name="imageTest">
<input type="file"
name="myImage"
size="30" onChange="previewImage(document.imageTest.myImage,
'replaceMe')"/>
<br>
<img src="clear.gif" name="replaceMe" width="1" height="1"/>
</form>