網頁圖片處理代碼全集整理

2010-08-28 10:47:08來源：西部e網作者：

　　1，掉鏈級圖片的替代圖片

　　2，自動縮小大圖

　　經常看到一些圖片很大，上傳后顯示會撐滿屏幕下面的例子通過檢測if(this.width>screen.width-350)then(this.width=screen.width-350)如果該圖片的寬度大于“屏幕寬度-350”，則讓該圖就顯示“屏幕寬度-350”這么大小。

　　3，禁止IE6中大尺寸圖片的自動縮小

　　4，去掉用IE6.0瀏覽圖片，當鼠標放到圖片上時出現快捷工具（打印、郵寄、另存等）

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

　　5，去掉熱點地圖上的區域線框與超鏈接的線框

　　6，可控制上傳圖片的大小

　　7，檢測一個圖片的長寬尺寸

　　8，按比例縮小

　　9，類似Acdsee看大圖的時的拖動

　　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>

　　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="網頁教學網">

關鍵詞：圖片

成人午夜激情影院,小视频免费在线观看,国产精品夜夜嗨,欧美日韩精品一区二区在线播放

網頁圖片處理代碼全集整理

相關閱讀:

贊助商鏈接: