主頁 > 公司新聞 > 常見問題 >

從JS上傳圖片代碼中找到限制大小的控件函數

時間:2018-03-14 作者: 來源:互聯網 瀏覽次數:
創杰網絡找了一個簡單的JS上傳圖片前的限制包括(jpg jpg gif及大小高寬)的代碼:
功能: 
1.限制擴展名:只能jpg和gif 
2.限制圖片大小:K為單位 
3.限制圖片寬高:px為單位
4.限制已經損壞的圖片 
5.限制更改過擴展名的圖片(比如強制把一個動態的GIF擴展名改為JPG了) 
使用限制: 
要在InputFile里增加onchange事件,使其選擇文件后能在一個img標簽里加載出來,否則使用會出錯 

imglimit.js 

function limitImg(){ 
var img=document.getElementById(arguments[0]);//顯示圖片對象 
var maxSize=arguments[1];// 
var allowGIF=arguments[2]||false; 
var maxWidth=arguments[3]||0; 
var maxHeight=arguments[4]||0; 
var postfix=getPostfix(img.src); 
var str=".jpg"; 
if(allowGIF){str+=".gif"} 
if(str.indexOf(postfix.toLowerCase())==-1){ 
if(allowGIF){return "圖片格式錯誤,只能上傳jpg或gif圖像";}else{return "圖片格式錯誤,只能上傳jpg圖像";} 
}else if(img.fileSize>maxSize*1024){ 
return "圖片大小不符合,請限制在"+maxSize+"K以內"; 
}else{ 
if(img.fileSize==-1){ 
return "圖片格式錯誤,可能是已經損壞或者更改擴展名導致,請重新選擇一張圖片"; 
}else{ 
if(maxWidth>0){ 
if(img.width>maxWidth){ 
return "圖片寬度超過限制,請保持在"+maxWidth+"像素內"; 
}else{ 
if(img.height>maxHeight){ 
return "圖片高度超過限制,請保持在"+maxHeight+"像素內"; 
}else{ 
return ""; 


}else{ 
return ""; 




//根據路徑獲取文件擴展名 
function getPostfix(path){ 
return path.substring(path.lastIndexOf("."),path.length); 

}


頁面調用: 

<body> 
<input type="file" onchange="document.getElementById('img1').src=this.value;" /> 
<img id="img1" /> 
<input type="button" onclick="aa()" value="上傳" /> 
</body> 
<mce:script type="text/javascript"><!-- 
function aa(){ 
if(limitImg('img1',100,false,1000,100)==""){ 
alert("圖片上傳成功"); 
}else{ 
alert(limitImg('img1',100,false,1000,100)); 


// --></mce:script>

從中我們可以找到這樣一段if(img.fileSize>maxSize*1024) 

這里就是對上傳圖片進行的大小判斷。

按照創杰網絡的思路我們在處理在JS里面的上傳限制的時候可以通過搜索.fileSize這樣的關鍵詞來找到我們的大小修改地方了,大家都學會了嗎!

一本一本久久a久久精品宗合于田真里