欢迎来到覃师宁博客!
帝国cms使用手册

帝国cms账号注册上传头像如何实现预览头像功能

编辑:覃师宁 来源:qinshining.com 时间:2022-02-22 00:59:26 阅读量: 人已围观

帝国cms注册账号过程,上传头像非必填项,但是有客户需要注册过程实时上传头像预览,那么如何实现这一功能呢?

先看效果图

帝国cms账号注册上传头像如何实现预览头像功能 第1张

解决办法:修改头像字段userpic表单代码

帝国cms账号注册上传头像如何实现预览头像功能 第2张

路径:后台--用户--管理会员字段--输入表单替换html代码--替换如下代码

<img id="imgshow" src="http://qinshining.com/skin/myblog/images/favicon.png" alt="" style="display: block;padding-bottom: 10px;width:64px;height:64px;" />
<input type="file" name="userpicfile">&nbsp;&nbsp;<?=empty($addr[userpic])?"":"<img src='".ehtmlspecialchars(stripSlashes($addr[userpic])).":'/e/data/images/nouserpic.gif' border=0>"? />
<script>
$('#userpicfile').change(function(){
  var file = $('#userpicfile').get(0).files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload=function(e){
  console.log(e);
  $('#imgshow').get(0).src = e.target.result;
}
});
</script>

当然,这个办法同样试用与标题图片titlepic字段,有兴趣的朋友可以自行测试

很赞哦!(

相关文章

文章评论

人参与,共有 0 条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表

网创邦微信公众号