帝国CMS二次开发设置随机会员头像
2020-04-10 站长 站长日志
帝国CMS二次开发后的效果
帝国CMS随机会员头像功能开发步骤
1、首先把会员的“userpic”字段设置为文本类型,主要用来存头像路径。然后在新建一个“userpic2”字段,主要用来上传头像。
2、随机头像图片代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
< table width = "100%" > < tr > < td valign = "top" >随机图像:</ td > < td bgcolor = 'ffffff' > < img src = '/e/template/Style/img/1.jpg' id = 'img2' width = "180" height = "180" /> </ td > </ tr > < tr > < td colspan = "2" height = "20" ></ td > </ tr > < tr > < td colspan = "2" >< a class = "changeImg" href = "javascript:void(0)" onclick = "ChangeFace()" >换一张</ a > </ td > </ tr > < tr > < td colspan = "2" height = "20" ></ td > </ tr > < tr > < td colspan = "2" align = "center" > < button class = "editPassword-submit" type = "submit" id = "faceSubmit" >使用头像</ button > </ td ></ tr > </ table > < script type = "text/javascript" > function ChangeFace() { //x上限,y下限 var x = 10; var y = 1; var rand = parseInt(Math.random() * (x - y + 1) + y); var face = '/e/template/Style/img/' + rand + '.jpg'; $("#img2").attr('src', face); $("input[name='userpic']").attr('value', face); } </ script > |
3、userpic字段代码
1 2 |
<input name= "userpic" type= "text" id= "userpic" value= "<?=$ecmsfirstpost==1?" ":ehtmlspecialchars(stripSlashes($addr[userpic]))?>" size= ""
"display:none" > <?= empty ( $addr [userpic])? "" : "<img src='" .ehtmlspecialchars( stripSlashes ( $addr [userpic])). "' border=0 id=img2>" ?><br> |
4、userpic2字段代码
1 2 |
<input type= "file" name= "userpic2file" size= "45" > <input name= "userpic2" type= "text" id= "userpic2" value= "<?=$ecmsfirstpost==1?" ":ehtmlspecialchars(stripSlashes($addr[userpic2]))?>" size= ""
"display:none" > |
5、给表单上传图片提交按钮设置一个ID
1 | < input type = 'submit' name = 'Submit' value = '上传头像' onclick = "bt();" > |
让他在提交前,把上传的userpic2字段内容赋值到userpic字段里面。
1 2 3 4 |
function bt(){ var txt = $( "input[name='userpic2']" ).val(); $( "input[name='userpic']" ).attr( 'value' ,txt); } |
这样就可以了,点击左边的“上传图片”按钮会把userpic2的内容给userpic,点击右边的“使用头像”按钮,也会把随机生成的头像地址赋值给userpic。
个人觉得挺麻烦的,主要是不想改程序,就用这种“障眼法”来完成。