1，掉鏈級圖片的替代圖片
[Ctrl+A 全選,提示:你可修改代碼後運行] |
經常看到一些圖片很大，上傳後顯示會撐滿屏幕
下面的例子通過檢測
if(this.width>screen.width-350)then(this.width=screen.width-350)
如果該圖片的寬度大於“屏幕寬度-350”，則讓該圖就顯示“屏幕寬度-350”這麼大小。
[Ctrl+A 全選,提示:你可修改代碼後運行] |
3，禁止IE6中大尺寸圖片的自動縮小
[Ctrl+A 全選,提示:你可修改代碼後運行] |
4，去掉用IE6.0瀏覽圖片，當鼠標放到圖片上時出現快捷工具（打印、郵寄、另存等）
方法一：
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
定義CSS：
<style>
img {nobar:expression(this.galleryImg='no')}
</style>
5，去掉熱點地圖上的區域線框與超鏈接的線框
| <TEXTAREA class=editbox style="WIDTH: 443px; HEIGHT: 54px" name=htmlArea rows=3 cols=70><a href="#" onFocus=this.blur()><img src="jsimg/marylin.jpg" border=0></a>
</TEXTAREA> [Ctrl+A 全選,提示:你可修改代碼後運行] |
6,可控制上傳圖片的大小
[Ctrl+A 全選,提示:你可修改代碼後運行] |
[Ctrl+A 全選,提示:你可修改代碼後運行]
|
[Ctrl+A 全選,提示:你可修改代碼後運行] |
9,類似Acdsee看大圖的時的拖動
[Ctrl+A 全選,提示:你可修改代碼後運行] |
10,選擇圖片產生縮略圖，最多10個
| <TEXTAREA class=editbox name=htmlArea rows=8 cols=70><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+'" οnlοad="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.οnlοad=handleGoodImage;
imgExt.οnerrοr=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 οnchange=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 οnfοcus="">
</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 οnclick=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>
</TEXTAREA> [Ctrl+A 全選,提示:你可修改代碼後運行] |
[Ctrl+A 全選,提示:你可修改代碼後運行] |