//add-user-headImg 是 input ,使用change监听
$("#add-user-headImg").change(function(){
//检测用户的浏览器是否支持FileReader
if(typeof FileReader==='undefined'){
alert("您的浏览器暂不支持上传图片");
}
//获取文件
var file = this.files[0];
//判断文件格式
if(file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/gif'){
layer.msg("头像格式不正确",{time:3000,offset:"250px",shift:6,area:["150px","30px"]});
return false;
}
//判断头像大小,不超过1.5M
if(file.size > (1024 * 1024 * 1.5)){
layer.msg("头像图片不能超过1.5M",{time:3000,offset:"300px",shift:6,area:["150px","30px"]});
return false;
}
//读取图片并读取图片宽高,以等比例显示
var reader = new FileReader();
reader.readAsDataURL(file);
//读取完成,构造Image对象,获取 Image对象,获取宽高
//onload是在上面的读取完毕后触发的
reader.onload = function(){
//获取读取的结果,也就是URL
var imgURL = this.result;
//构造Image对象,其实也就是<img />标签,只不过没有属性,可以赋予属性
var image = new Image();
//赋予它src就是给它图片了。
image.src = imgURL;
//这里设置你在预览区的图片,显示,因为上面的Image对象我们只用来获取宽高,不用它创建img
//所以需要你自己准备
$("#show-headImg").attr("src",imgURL);
image.onload = function(){
//获取Image对象的宽高
var fileWidth = this.width;
var fileHeight = this.height;
//上传文件的宽高之比
var ratio = fileWidth / fileHeight;
//调整图片比例,固定宽为 155
var ImgHeight = 155 / ratio;
//如果高超出比例,就按最大比例,145是我定的最大高
if(ImgHeight > 145){
ImgHeight = 145;
}
//调整高,这里一定要加 !important,否则下次你设置的时候,css不会改变。
$("#show-headImg").css({height:ImgHeight+"px !important"});
};
};
});
js,jq实现上传图片时,显示图片,自动调整图片宽高
最新推荐文章于 2023-06-06 01:51:57 发布