Home >Web Front-end >JS Tutorial >Detailed explanation of how jQuery determines the type and size of uploaded images
This time I will bring you jQueryDetailed explanation of the method of judging uploaded picturestype and size. What are the precautions for jQuery to judge the type and size of uploaded pictures? The following is a practical case, let’s take a look.
JQuery is used here to determine the type and size of the uploaded image:
<!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() method retrieves the specified string from back to front, if If the specified character appears, the position of the character is returned. If not, -1 is returned, and the position is counted from 0.
toUpperCase() method converts to uppercase letters
substring() method intercepts a string. The first parameter is the starting position, and the second parameter is the ending position (if omitted, the end of the string will be intercepted by default), and # The difference between ##slice() and substr() is that substring() does not accept negative parameters
slice()The method is the same as the substring() method, the difference is that it accepts negative parameters (if the parameter is a negative number, the position is calculated from the end of the string)
substr()Method to intercept a string, the first parameter is the starting position, the second parameter is the intercepted length (different from slice and substring), it is no longer recommended to use
What are the main APIs of jQuery
The above is the detailed content of Detailed explanation of how jQuery determines the type and size of uploaded images. For more information, please follow other related articles on the PHP Chinese website!