既然有上传头像功能,那用户肯定得选择完照片后显示出来,
废话不多说,下面就是提供一段简单的代码来实现,希望对大家也有帮助;
h5 部分
<!--头像-->
<div class="head-p" id="touxiang">
<img src="/img/user_pic_big.jpg" alt='头像' width="100" height="100" id="avatar_img">
</div>
<div id="fromTx">
<input type="file" class="file" name="avatar" id="avatar">
</div>
js让图片显示方式
// 头像预览
$("#avatar").change(function () {
//拿到文件数据
var choose_file = $(this)[0].files[0];
//截取图片名称小数点后的字符串
var ftype=choose_file.name.substring(choose_file.name.lastIndexOf(".")+1);
//校验格式是否是图片类型
if(ftype=="jpg" || ftype=="png" || ftype=="jpeg" || ftype == "JPG"){
//限制大小,照片大小不能超过1M
var size = choose_file.size / 1024 / 1024;
if (size > 1) {
alert("头像不能大于1M");
return false;
}
// 实例化一个阅读器对象
var reader = new FileReader();
// 读取文件的路径,没有返回值,结果在reader.result里
reader.readAsDataURL(choose_file);
// 读取需要时间,读完后再修改图片路径
reader.onload=function () {
//回显给上方图片中
$("#avatar_img").attr("src",this.result);
}
}else{
alert("头像格式不对,请重新选择!");
return false;
}
});
代码就这么简单,如有问题请留言一起讨论~