This time I will show you how to get the type and size of the uploaded image, and what are the precautions for getting the type and size of the uploaded image. 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('請(qǐng)上傳正確格式的圖片');
resetFile();
return false;
}else{
p_1.html('圖片格式為:' + ext);
}
//獲取圖片大小,注意使用this,而不是$(this)
var size = this.files[0].size / 1024;
if(size > 10240){
alert('圖片大小不能超過(guò)10M');
resetFile();
return false;
}else{
p_2.html('圖片大小為:' + size.toFixed(2) + 'KB');
}
})
//還原
function resetFile(){
//清空f(shuō)ile表單的值,不能直接使用$('#file').val('')這種寫(xiě)法
$('form').html('<input type="file" id="file" />');
p_1.html('圖片格式為:');
p_2.html('圖片大小為:');
}
})
</script>
</body>
</html>
lastIndexOf()
The method retrieves the specified string from back to front. If the specified character appears, Then return the position of the character, if not, return -1, the position starts counting 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), which is the same as slice()# The difference between ## and
substr() is that
substring() does not accept negative parameters
slice()The method is the same as
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 intercepts the string, The first parameter is the starting position, and the second parameter is the length of interception (different from slice and substring). It is no longer recommended to use
I believe you have mastered the method after reading the case in this article. More exciting Please pay attention to other related articles on php Chinese website!
Recommended reading
How to use vue to request local json
##React props and state attribute practical case explanation
The above is the detailed content of How to get the uploaded image type and size. For more information, please follow other related articles on the PHP Chinese website!