判断上传图片的尺寸和大小 ----实战

最新推荐文章于 2023-06-26 21:26:41 发布

ylhsuper

最新推荐文章于 2023-06-26 21:26:41 发布

阅读量426

点赞数

本文链接：https://blog.csdn.net/ylhsuper/article/details/75221608

版权

//判断上传图片的尺寸和大小
function checkImgFileSize(idName){
var imgFileInput = document.getElementById(idName);
if(imgFileInput.files){
var imgFile = imgFileInput.files[0];
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
//加载图片获取图片的真是宽度和高度
var image = new Image();
image.onload = function(){
var width = image.width;
var height = image.height;
// alert(width+'======'+height+"====="+imgFile.size);
if(imgFile.size < 4*1024){
$("#errorMsg").text("不能上传小于4k的图片！");
$("#errorLayer").show();
$("#"+idName).siblings("input[type='hidden']").removeClass('verifyFlag');
$("#"+idName).parent(".submitpic_in").siblings(".txt").css("color","#f00").text('请重新上传');
}else{
// $("#"+idName).siblings("input[type='hidden']").addClass('verifyFlag');
$("#"+idName).parent(".submitpic_in").siblings(".txt").css("color","#000").text('上传成功');
}
statusVerify();
}
image.src= data;
};
reader.readAsDataURL(imgFile);
}
else{
var image = new Image();
image.onload =function(){
var width = image.width;
var height = image.height;
var fileSize = image.fileSize;
// alert(width+'======'+height+"====="+imgFile.size);
if(imgFile.size < 4*1024){
$("#errorMsg").text("不能上传小于4k的图片！");
$("#errorLayer").show();
$("#"+idName).siblings("input[type='hidden']").removeClass('verifyFlag');
$("#"+idName).parent(".submitpic_in").siblings(".txt").css("color","#f00").text('请重新上传');
}else{
// $("#"+idName).siblings("input[type='hidden']").addClass('verifyFlag');
$("#"+idName).parent(".submitpic_in").siblings(".txt").css("color","#000").text('上传');
}
statusVerify();
}
image.src = imgFileInput.value;
}
}
//接口模拟 start
function uploadPic(fileId,imgId){
$("#" + fileId).change(function(){
var objUrl = getObjectURL(this.files[0]);
if(objUrl){
$("#" + imgId).attr("src",objUrl);
};
$(this).siblings("input[type='hidden']").addClass("verifyFlag").attr("value",objUrl);
var i = 0;
var timerOne = setInterval(function () {
i++;
$("#" + fileId).siblings('.layer').text(i + "%").css("display","block");
if ( i == 100 ) {
clearInterval(timerOne);
$("#" + fileId).siblings('.layer').css("display","none");
$("#" + fileId).parent().siblings('.txt').text("上传成功");
checkImgFileSize(fileId);

}
}, 20);
});
};
uploadPic("idCardFace","imgFace");
uploadPic("idCardBack","imgBack");
uploadPic("idCardHand","imgHand");
//接口模拟 end

//判断状态提交认证

function statusVerify() {}

<div class="submitpic">
    <div class="submitpic_in">
    	<input type="file" name="front"  accept="image/*" class="file_input"  id="idCardFace" />
    	<input type="hidden" id="cardFace" />
    	<img src="./images/pic.png" alt="" class="file_img" id="imgFace" />
    	<span class="layer">66%</span>
    </div>
    <span class="txt">上传</span>
 </div>