首頁 >web前端 >js教程 >上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧

上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧

WBOY
WBOY原創
2016-05-16 17:35:251132瀏覽
js 驗證上傳圖片
複製程式碼 程式碼如下:


程式碼如下:
=new Image();//建立一個影像物件
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部圖片格式類型
varFileObj,ImgFileSize,ImgWidth,ImgHeight ,FileExt,ErrMsg,FileMsg,IsImg//全域變數圖片相關屬性
//以下為限制變數
var AllowExt=""; //允許上傳的檔案類型ŀ為無限每個副檔名後邊要加上一個"|" 小寫字母表示
var AllowImgFileSize=100;//允許上傳圖片檔案的大小0為無限制單位:KB
var AllowImgWidth=385; //允許上傳的圖片的寬度Ɓ為無限制單位:px(像素)
var AllowImgHeight=441; //允許上傳的圖片的高度ƹ為無限單位:px(像素)
function CheckProperty(obj) //偵測影像屬性
{
FileObj=obj;
if(ImgObj.readyState!="complete")//如果映像是未載入完成進行循環偵測
{
setTimeout("CheckProperty(FileObj)",500) ;
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片檔案的大小
ImgWidth=ImgObj.wid;// 取得圖片/取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="n圖片大小:" ImgWidth "*" ImgHeight "px";
FileMsg=FileMsg "n圖片檔案大小: " ImgFileSize "Kb";
FileMsg=FileMsg "n圖片檔案副檔名:" FileExt "n可以上傳! =ErrMsg "n請上傳寬度等於" AllowImgWidth "px的文件,目前圖片寬度為" ImgWidth "px";
if(AllowImgHeight!=ImgHeight)
ErrMsg=ErrMsg "n請上傳高度等於" AllowImgHeight " px的文件,目前圖片高度為" ImgHeight "px";
if(AllowImgFileSize!=0&&AllowImgFileSize上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧ErrMsg=ErrMsg "n請上傳小於" AllowImgFileSize "KKmize" "KB";
if(ErrMsg!="")
{
alert(ErrMsg);
return false;
}
else
return true;
}
else
return true;
}//end CheckProperty();
ImgObj.onerror=function(){ErrMsg='n圖片格式不正確或圖片已損壞!';}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
IsImg=false;
if(obj.value=="")
return false;
FileExt=obj.value.substr( obj.value.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt "|")!=-1)//如果圖片文件,則進行圖片資訊處理
{
IsImg=true;
FileObj=obj;
ImgObj.src=obj.value;
returnCheckProperty(obj);
}else
{
alert("該檔案類型不允許上傳。請上傳" AllImgExt "類型的文件,n當前文件類型為" FileExt);
obj.value='';
return false;
}
}

上傳的js驗證

下文將介紹怎麼控制一個上傳檔案的副檔名。 🎜>
程式碼如下: function check2() { var file = document.getElementsByName("file").value; file=="")
{
alert("請選取檔案");
return false;
}
var strTemp = file.split(".");
var strCheck = strTemp[strTemp.length-1];
if(strCheck.toUpperCase()=='JPG')
{
return true;
}else
{
alert('上傳文件類型不對!');
return false;
}
}


表單:



複製程式碼

程式碼如下:

要注意的是, document.getElementsByName("file").value取得的是所上傳的檔案的絕對路徑,故使用字串分割法將檔案的拓展名分割出來,然後再進行判斷。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn