前端检查上传图片的格式，大小，分辨率

最新推荐文章于 2024-06-10 18:16:43 发布

qq_35936045

最新推荐文章于 2024-06-10 18:16:43 发布

阅读量4.8k

点赞数 1

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/qq_35936045/article/details/52965695

版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的图片上传功能，包括文件格式验证、大小限制及实时预览效果。该应用还展示了如何读取并显示图片的基本属性如格式、大小和分辨率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1.0, width=device-width">
<title>Image Test</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var fileUrl,imgSuffix,imagSize;
var imgReg = /(gif|jpg|jpeg|png|tiff|GIF|JPG|JPEG|PNG|TIFF)$/;
$(document).ready(function(){
$("#uploadImg").on("change",function(){
uploadImgCheck("uploadImg",this);
});
});

function uploadImgCheck(imgId,file){
fileUrl = $("#" + imgId).val();
if(fileUrl){
//图片后缀
imgSuffix = fileUrl.substring(fileUrl.lastIndexOf(".") + 1 ).toLowerCase();
//图片大小
imagSize = file.files[0].size;
if(imgReg.test(imgSuffix)){
if(imagSize < 5*1024*1024){
var img = document.getElementById('imghead');
var reader = new FileReader();
reader.onload = function(evt){
img.src = evt.target.result;
// 图片分辨率
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
$("#imghead").css("width","70%").css("padding-left","15%");
var imageInfoTxt = "图片后缀：" + imgSuffix + "<br/>图片大小："+ (imagSize/(1024*1024)).toFixed(3) + " M <br/>图片分辨率：" + imgWidth + " * " + imgHeight + "<br/>";
$("#imageInfo").empty().html(imageInfoTxt);
/*
if(imgWidth > 1024 || imgHeight > 768){
alert('图片分辨率1024*768 以内');
}else{
//ajaxFileUploadPic(imgId);
}*/
}
reader.readAsDataURL(file.files[0]);

}else{
alert('图片大小不能大于 5M');
}
}else{
alert('只允许上传JPG、JPEG、GIF、PNG、TIFF格式图片');
}
}
}

</script>
</head>

<body>
<span id="imageInfo"></span>
<input type="file" id="uploadImg"/>
<div id="preview">
<img id="imghead">
</div>

</body>

</html>