<!-- TWO STEPS TO INSTALL IMAGE UPLOAD PREVIEW: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <script type="text/javascript">... <!-- Begin /**//* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */ /**//***** CUSTOMIZE THESE VARIABLES *****/ // width to resize large images to var maxWidth=600; // height to resize large images to var maxHeight=800; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="spacer.gif"; /**//***** DO NOT EDIT BELOW *****/ 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 Please load an image with an extention of one of the following: "+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; } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <div align="center" style="line-height: 1.9em;"> Test it by locating a valid file on your hard drive: <br> <input type="file" id="picField" onchange="preview(this)"> <br> <img alt="Graphic will preview here" id="previewField" src="spacer.gif"> <br><div style="font-size: 7pt;"> Modify By<a href="http://blog.csdn.net/lifuyun">LiFuyun.net</a></div> </div> <p><center> <font face="arial, helvetica" size"-2">深海提供<br> by <a href="http://blog.csdn.net/lifuyun">LiFuyun.net</a></font> </center><p>
TWO STEPS TO INSTALL IMAGE UPLOAD PREVIEW: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> STEP ONE: Paste this code i