当前位置:首页 > 网络编程 > WEB编程 > 其它 > 选择图片产生缩略图,最多10个

选择图片产生缩略图,最多10个

点击次数:29 次 发布日期:2008-11-26 20:10:25 作者:源代码网
源代码网推荐
<html> <head> <title>Upload Image</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT language=Javascript> gFlag=false; var gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile; gMaxSize="10"; gCurrentSize=".18"; gMaxSize=parseFloat(gMaxSize)*1024*1024; //gMaxSize=parseFloat("1")*1024; gCurrentSize=parseFloat(gCurrentSize)*1024*1024; gErr=""; gUploadSize=0; //////////////////////////////////////////////////// function validate() { var lErr; lErr=""; if((gUploadSize+gCurrentSize)>gMaxSize){ if(form1.TempAlbum.value!=form1.OldAlbum.value){ lErr=".您要上传的图片尺寸大于您的剩余相册容量,请选择上传至"临时相册"n"+lErr; } } if(form1.OldAlbum.value=="0"){ if(form1.NewAlbum.value.length==0){ lErr=".请输入新相册名称n"+lErr; } } if(lErr.length>0){ alert("错误:n"+lErr); if(lErr.indexOf("请输入新相册名称nn")!=-1){ form1.NewAlbum.focus(); } return false; } form1.submit(); /*进度条控制*/ //var winProgress=window.open("progress.htm","progress","width=300,height=250"); //winProgress.focus(); /*进度条控制*/ return true; } function handleBadImage() { alert("所选图片并非有效的JPG格式!n请重新选择!"); eval("form1.file"+gCurInputIndex+".outerHTML="<input type="file" name="file"+gCurInputIndex+"" style="width:275" value="" onChange="FileChange(this);">""); eval("form1.file"+gCurInputIndex+".fireEvent("onChange")"); return false; } function handleGoodImage() { imgsrc="http://www.zzchn.com/edu/20071025/<img src=""+gCurImageSrc+"" onload="DrawImage(this,"+gCurInputIndex+"); " width="0" height="0">"; gCurOFile.parentNode.previousSibling.innerHTML=imgsrc; return true; } ////////////////////////////////////////// function FileChange(oFile){ gErr=""; gUploadSize=0; str=""; gCurOFile=oFile; gCurImageSrc=oFile.value; inputname=oFile.name; i=inputname.substr((inputname.length-1),1); gCurInputIndex=i; if (gCurImageSrc.length>0){ //check for none jpg imgExt=new Image(); imgExt.onload=handleGoodImage; imgExt.onerror=handleBadImage; var fileName = gCurImageSrc.replace("", "/"); // NN7 var imgURL = "file:///" + fileName; if((navigator.appVersion.indexOf("Mac")>-1) && (navigator.appVersion.indexOf("MSIE")>-1)){ imgURL="file://" + fileName; } imgExt.src=imgURL; //finish check } } function ShowImgOfServer(NewPath,ImgD){ ImgD.src=NewPath; } ///////////////////////////////////// function DrawImage(ImgD,Index){ var flag=false; var image=new Image(); image.src=ImgD.src; ImgD.value=ImgD.src; if(image.fileSize>2048000){ image.outerHTML=""; gErr+="此图片尺寸过大,图片尺寸应小于2MBn"; eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275" value="" onChange="FileChange(this);">""); eval("form1.file"+Index+".fireEvent("onChange")"); alert("此图片尺寸过大,图片尺寸应小于2MBn"); return ; } if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){ image.outerHTML=""; gErr+="此图片类型不匹配,只能上传JPG(JPEG)格式文件n"; eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275" value="" onChange="FileChange(this);">""); eval("form1.file"+Index+".fireEvent("onChange")"); alert("此图片类型不匹配,只能上传JPG(JPEG)格式文件n"); return ; } tempFileName=image.src; var iLastDot; iLastLine=tempFileName.lastIndexOf("/"); if(iLastLine!=-1){ tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length); } if(!CheckIfEnglish(tempFileName)){ image.outerHTML=""; gErr+="此图片文件名包含中文或其他不合法字符n文件名只能由"a-z"、"A-Z"、"_"、"-"构成n"; eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275" value="" onChange="FileChange(this);">""); eval("form1.file"+Index+".fireEvent("onChange")"); alert("此图片文件名包含中文或其他不合法字符n文件名只能由"a-z"、"A-Z"、"_"、"-"构成n"); return ; } if(gErr.length>0){ return; } if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= 120/80){ if(image.width>120){ ImgD.width=120; ImgD.height=(image.height*120)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"n图片大小: "+image.fileSize+"n图片路径: "+image.src; eval("document.all.width"+Index+".value="+image.width); eval("document.all.height"+Index+".value="+image.height); var oCreated=new Date(image.fileModifiedDate); eval("document.all.PicUpdateDate"+Index+".value=""+oCreated.toLocaleString()+"""); } else{ if(image.height>80){ ImgD.height=80; ImgD.width=(image.width*80)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"n图片大小: "+image.fileSize+"n图片路径: "+image.src; eval("document.all.width"+Index+".value="+image.width); eval("document.all.height"+Index+".value="+image.height); var oCreated=new Date(image.fileModifiedDate); eval("document.all.PicUpdateDate"+Index+".value=""+oCreated.toLocaleString()+"""); } } if(parseInt(Index)==parseInt(form1.upcount.value)){ form1.upcount.value=parseInt(form1.upcount.value)+1; str+="<table width="100%" ><tr valign="middle" ><td align="center" id="tdimg" height="" width="120" ></td><td id="tdfile" >文件"+(parseInt(Index)+1)+":<input onpropertychange="FileChange(this);" type="file" name="file"+(parseInt(Index)+1)+"" style="width:275" ><input id="width"+(parseInt(Index)+1)+"" name="width"+(parseInt(Index)+1)+"" type="hidden" value=""><input id="height"+(parseInt(Index)+1)+"" name="height"+(parseInt(Index)+1)+"" type="hidden" value=""><input name="PicUpdateDate"+(parseInt(Index)+1)+"" type="hidden" id="PicUpdateDate"+(parseInt(Index)+1)+""></td></tr></table>"; window.upid.insertAdjacentHTML("beforeEnd",str+"<br>"); } gUploadSize+=parseFloat(image.fileSize); } ////////////////////////////////////////// function AlbumChange(Value){ if(Value=="0"){ document.all.sNewAlbum.style.display="inline"; document.all.NewAlbum.focus(); } else{ document.all.sNewAlbum.style.display="none"; } return ; } function CheckIfEnglish( String ) { var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_."; var i; var c; if(String.charAt( 0 )=="-") return false; if( String.charAt( String.length - 1 ) == "-" ) return false; for( i = 0; i < String.length; i ++ ) { c = String.charAt( i ); if (Letters.indexOf( c ) < 0) return false; } return true; } </SCRIPT> </head> <body > <form name="form1" method="post" action=""> <TABLE align=center bgColor=#cccccc border=0 borderColorDark=#cccccc borderColorLight=#000000 cellPadding=5 cellSpacing=1 height=367 width="500"> <TBODY> <TR vAlign=center> <TD align=left bgColor=#ffffff colSpan=2 height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%"> <TBODY> <TR vAlign=center> <TD align=middle bgColor=#ffffff id=tdimg width=120></TD> <TD bgColor=#ffffff id=tdfile>文件1: <INPUT name=file1 onpropertychange=FileChange(this); style="WIDTH: 275px" type=file> <INPUT id=width1 name=width1 type=hidden> <INPUT id=height1 name=height1 type=hidden> <INPUT id=PicUpdateDate1 name=PicUpdateDate1 type=hidden></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR bgColor=#eeeeee vAlign=center> <TD align=middle bgColor=#ebebeb colSpan=2 height=24> <DIV align=left>将图片上传至已有相册 <SELECT id=OldAlbum name=OldAlbum onchange=AlbumChange(this.value);> <OPTION value=0><新建相册></OPTION> <OPTION selected value=365>临时相册</OPTION> </SELECT> <INPUT id=TempAlbum name=TempAlbum type=hidden value=365> <SPAN id=sNewAlbum style="DISPLAY: none">或新建相册 <INPUT id=NewAlbum maxLength=50 name=NewAlbum onfocus=""> </SPAN></DIV></TD> </TR> <TR bgColor=#eeeeee vAlign=center> <TD align=middle bgColor=#ebebeb colSpan=2 height=24> <DIV align=center><FONT size=2> <INPUT class=bt name=Submit onclick=validate(); type=button value="· 上传已选图片 ·"> <INPUT id=upcount name=upcount type=hidden value=1> <INPUT id=from name=from type=hidden> </FONT></DIV></TD> </TR> </TBODY> </TABLE> </form> </body> </html>
6.不同的ALT
源代码网推荐
代码:
源代码网供稿.
网友评论 (0)
会员中心
网络编程
本站推荐
网络编程之精华