js圖片處理範例程式碼_javascript技巧

複製程式碼 程式碼如下:

var ImgObj=new Image();影像物件
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部圖片格式類型
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsgSize,HasChekeded ,IsImg//全域變數圖片相關屬性
//以下為限制變數
var AllowExt=".jpg|.gif|.doc|.txt|" //允許上傳的檔案類型?為無限制每個副檔名後邊要加上一個"|" 小寫字母表示
var AllowImgFileSize=70; //允許上傳圖片檔案的大小0為無限單位：KB
var AllowImgWidth=500; //允許上傳的圖片的寬度?為無限單位：px(像素)
var AllowImgHeight=500; //允許上傳的圖片的高度?為無限單位：px(像素)
HasChecked=false;
function CheckProperty (obj) //偵測影像屬性
{
FileObj=obj;
if(ErrMsg!="") //偵測是否為正確的影像檔案傳回出錯訊息並重設
{
ShowMsg(ErrMsg,false);
return false; //傳回
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;round(ImgObj.fileSize/1024*100)/100;/
ImgWidth=ImgObj.width; //取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="n圖片大小:" ImgWidth "*" ImgHeight "px";
FileMsg=FileMsg "n圖片檔案大小:" ImgFileSize "Kb";
FileMsg=FileMsg "n圖片檔案副檔名:" FileExt;
if(AllowImgWidth!=0&&AllowImgWidth
if(AllowImgWidth!=0&&AllowImgWidthif(AllowImgHeight!=0&&AllowImgHeightErrMsg=ErrMsg "n圖片圖片超過高度限制。請上傳高度小於" AllowImgHeight "px的文件，目前圖片高度為" ImgHeight "px";
if(AllowImgFileSize!=0&&AllowImgFileSizeErrMsg=ErrMsg "n圖片檔案大小超過。請上傳小於" AllowImgFileSize "KB的文件，目前檔案大小為" ImgFileSize "KB";
if(ErrMsg!="") ShowMsg(ErrM,false);
else ShowMsg(FileMsg,true); else ShowMsg(FileMsg,true); 🎜>}
ImgObj.onerror=function(){ErrMsg='n圖片格式不正確或圖片已損壞!'}
function ShowMsg(msg,tf) //顯示提示訊息tf=true 顯示檔案資訊tf=false 顯示錯誤訊息msg-訊息內容
{
msg=msg.replace("n","

");
msg=msg.replace(/n/gi,"");
if(!tf)
{
FileObj.outerHTML=FileObj.outerHTML;
MsgList.innerHTML=msg;
HasChecked=false;MsgList.innerHTML=msg;
HasChecked=false;
if(IsImg) PreviewImg.innerHTML="";
else PreviewImg.innerHTML="非圖片檔案";
MsgList.innerHTML=msg;
HasChecked=true;
}
}
function CheckExt(obj)
{
ErrMsg="";
M; ";
FileObj=obj;
IsImg=false;
HasChecked=false;
PreviewImg.innerHTML="預覽區";
if(obj.value=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="")return false=="） ;
MsgList.innerHTML="檔案資訊處理中...";
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if( AllowExt!=0&&AllowExt.indexOf(FileExt "|")==-1) //判斷檔案類型是否允許上傳
{
ErrMsg="n該檔案類型不允許上傳。請上傳" AllowExt " 類型的文件，目前文件類型為" FileExt;
ShowMsg(ErrMsg,false);
return false;
}
if(AllImgExt.indexOf(FileExt "|") !=-1) //如果圖片文件，則進行圖片資訊處理
{
IsImg=true;
ImgObj.src=obj.value;
alert(ImgObj.src);
alert(Math.round(ImgObj.fileSize/1024*100)/100);
CheckProperty(obj);
return false;
}else{
FileMsg="n檔案副檔名: " FileExt;
ShowMsg(FileMsg,true);
}
}