<!-- 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=100;
? // height to resize large images to
var maxHeight=100;
? // 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\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;
}
// 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;">
Script submitted by: <a href=" Wedding Video / DVD</a></div>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href=" JavaScript Source</a></font>
</center><p>
<!-- Script Size:? 2.43 KB -->
posted on 2006-08-09 17:26
夢源 閱讀(276)
評論(0) 編輯 收藏