當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS實(shí)現(xiàn)判斷上傳圖片的大小

JS實(shí)現(xiàn)判斷上傳圖片的大小

2012/11/8 15:16:48作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS實(shí)現(xiàn)判斷上傳圖片的大小

【實(shí)例描述】

上傳文件或圖片的大小都會(huì)受到限制。本例學(xué)習(xí)如何在客戶端判斷用戶上傳圖片的大小。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（www.wangbatian.cn）</title>
<script LANGUAGE="JavaScript">
function Judge()
{
   //判斷圖片的大小是否大于50，或者小于0（沒有選擇圖片）
   if(document.all.myImg.fileSize>1024*50||
document.all.myImg.fileSize<=0)
   {
     alert('請(qǐng)選擇小于50K的圖片！');
     return false;                 
//不執(zhí)行任何操作
   }
   else{
    alert('上傳沒問題');
   }
}
</script>
</head>
<body>
<input type="file" id="jia" 
onchange="document.all.myImg.src=this.value"/>
<img src="" id="myImg" style="display:none">
<button onclick="Judge()">上傳圖片</button>
</body>
</html>

 

【運(yùn)行效果】

 判斷上傳圖片的大小運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是使用file控件和img控件。file控件用來上傳文件，img用來顯示上傳的圖片。通過file控件的“onchange”事件獲取圖片。img控件提供一個(gè)“fileSize”屬性來獲取圖片的大小。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：JS實(shí)現(xiàn)判斷上傳圖片的大小 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS實(shí)現(xiàn)  圖片  大小