溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用jQuery怎么判斷上傳圖片的類型，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
<input type="file" id="file" />
</form>
<p id="p_1">圖片格式為：</p>
<p id="p_2">圖片大小為：</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
var p_1 = $('#p_1'),
p_2 = $('#p_2');
$('body').on('change','#file',function(){
var path = $(this).val(),
extStart = path.lastIndexOf('.'),
ext = path.substring(extStart,path.length).toUpperCase();
//判斷圖片格式
if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){
alert('請上傳正確格式的圖片');
resetFile();
return false;
}else{
p_1.html('圖片格式為：' + ext);
}
//獲取圖片大小，注意使用this，而不是$(this)
var size = this.files[0].size / 1024;
if(size > 10240){
alert('圖片大小不能超過10M');
resetFile();
return false;
}else{
p_2.html('圖片大小為：' + size.toFixed(2) + 'KB');
}
})
//還原
function resetFile(){
//清空file表單的值，不能直接使用$('#file').val('')這種寫法
$('form').html('<input type="file" id="file" />');
p_1.html('圖片格式為：');
p_2.html('圖片大小為：');
}
})
</script>
</body>
</html>lastIndexOf()方法從后向前檢索指定字符串，如果出現了指定的字符，則返回該字符所在的位置，如果沒有，返回-1，位置從0開始計數
toUpperCase()方法轉換成大寫字母
substring()方法截取字符串，第一個參數為開始的位置，第二個參數為結束的位置（如果省略，則默認會截取到字符串的結尾），與slice()和substr()方法不同的是，substring()不接受負的參數
slice()方法同substring()方法，區別是接受負的參數（若參數為負數，則從字符串尾部開始計算位置）
substr()方法截取字符串，第一個參數是開始的位置，第二個參數是截取的長度（不同于slice和substring），現已不建議使用
以上就是使用jQuery怎么判斷上傳圖片的類型，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
