网页图片处理代码全集整理

作者:未知来源:网络更新日期：2005-11-3 阅读次数：

文字〖大中小〗自动滚屏(右键暂停)

，掉链级图片的替代图片

<img src="no.jpg" onerror="this.src=’images/logo.gif’">
[Ctrl+A 全选,提示:你可修改代码后运行]

　　2，自动缩小大图

　　经常看到一些图片很大，上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。

原图<br> <img src="jsimg/wallpaper.jpg"><br> 设定大小的图<br> <img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">
[Ctrl+A 全选,提示:你可修改代码后运行]

　　3，禁止IE6中大尺寸图片的自动缩小

原图,会自动缩小<br> <img src="jsimg/wallpaper.jpg"> <br> 设定不缩小<br> <img src="jsimg/wallpaper.jpg" galleryimg="no">
[Ctrl+A 全选,提示:你可修改代码后运行]

4，去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）

方法一：
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
定义CSS：
<style>
img {nobar:expression(this.galleryImg=’no’)}
</style>

5，去掉热点地图上的区域线框与超链接的线框

<a href="#" onFocus=this.blur()><img src="jsimg/marylin.jpg" border=0></a>
[Ctrl+A 全选,提示:你可修改代码后运行]

6,可控制上传图片的大小

<script language="javascript"> function orsc() { if(img.readyState!="complete")return false; if(img.offsetWidth!=132&&img.offsetHeight!=99){ alert("您选择的图片大小："+img.offsetWidth+"X"+img.offsetHeight+"\n"+"请选择132X99大小的图片") imgT=true; } //alert("图片大小："+img.offsetWidth+"X"+img.offsetHeight); //alert("图片尺寸："+img.fileSize); } function mysubmit(theform) { if(theform.file1.value=="") { alert("请点击浏览按钮，选择您要上传的JPG或GIF文件!") theform.file1.focus; return (false); } else { str= theform.file1.value; strs=str.toLowerCase(); lens=strs.length; extname=strs.substring(lens-4,lens); if(extname!=".jpg" && extname!=".gif") { alert("请选择JPG或GIF格式的文件!"); return (false); }else{ document.all("loadImg").src=theform.file1.value if(document.all("loadImg").offsetWidth!=132&&document.all("loadImg").offsetHeight!=99){ alert("您选择的图片大小："+document.all("loadImg").offsetWidth+"X"+document.all("loadImg").offsetHeight+"\n"+"请选择132X99大小的图片") return (false) } } } } </script> <form onSubmit="return mysubmit(this)" name="form" method="post" enctype="multipart/form-data"> <table width="100%" border=0 cellspacing=0 cellpadding=0> <tr><td valign=top height=30> <input type="hidden" name="act" value="upload"> <input type="file" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "MS Shell Dlg", ","Tahoma", ","宋体"; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 1px " name="file1" value=""> <input type="submit" name="Submit" value="上传" > </td> </tr> </table> <img id=loadImg> </form>
[Ctrl+A 全选,提示:你可修改代码后运行]

7,检测一个图片的长宽尺寸

[Ctrl+A 全选,提示:你可修改代码后运行]

8,按比例缩小

[Ctrl+A 全选,提示:你可修改代码后运行]

9,类似Acdsee看大图的时的拖动

[Ctrl+A 全选,提示:你可修改代码后运行]

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

<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("请输入新相册名称\n\n")!=-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=’<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+="此图片尺寸过大,图片尺寸应小于2MB\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("此图片尺寸过大,图片尺寸应小于2MB\n"); 
          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>

[Ctrl+A 全选,提示:你可修改代码后运行]

11,不同的ALT

<SCRIPT language=javascript1.2> 
<!-- 
tPopWait=50; 
tPopShow=50000; 
showPopStep=10; 
popOpacity=100;

sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null;

document.write("<style type=’text/css’id=’defaultPopStyle’>"); 
document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id=’dypopLayer’ style=’position:absolute;z-index:1000;’ class=’cPopText’></div>");

} 
}

function showIt(){ 
dypopLayer.className=popStyle; 
dypopLayer.innerHTML=sPop; 
popWidth=dypopLayer.clientWidth; 
popHeight=dypopLayer.clientHeight; 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
else popLeftAdjust=0; 
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
else popTopAdjust=0; 
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
dypopLayer.style.filter="Alpha(Opacity=0)"; 
fadeOut(); 
}

function fadeIn(){ 
if(dypopLayer.filters.Alpha.opacity>0) { 
dypopLayer.filters.Alpha.opacity-=1; 
tFadeIn=setTimeout("fadeIn()",1); 
} 
} 
document.onmouseover=showPopupText; 
//--> 
</script> 
<img src="images/logo.gif" alt="网页教学网">

[Ctrl+A 全选,提示:你可修改代码后运行]

上篇文章: 一个欠揍的街头瞎子VS一个单纯的美丽女孩
下篇文章：七夕礼物

【返回上页】【打印此页】【查看参与评论】

borland 在刚刚召开的javaone 2002盛会上赢得七项大奖

java的md5加密类(zt)

MD5的Java Bean实现

MD5算法的JAVA实现