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

帝国CMS教程

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

先看效果图

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

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

帝国cms模板开发 帝国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字段,有兴趣的朋友可以自行测试

标签: 帝国cms模板开发