首先看看会员中心默认界面
当我点击头像时,就会触发点击事件,去选择一张图片,然后就更新头像成功,就是这么快捷简单!下面展示代码,有点基础的程序员都应该能看懂!我相信你。。。
user.php 当前页面控制器中添加:
//头像
$head_url = '../data/head/head_'.$user_id.'.jpg';
$user_info['head_url'] = is_file($head_url)? $head_url.'?'.rand() : 'templates/images/preson.jpg';
$smarty->assign('user_info', $user_info);
html页面:
<script type="text/javascript">
//更新头像
function updateHead(){
var fd = new FormData(document.getElementById('myForm'));
var xhr = new XMLHttpRequest();
xhr.open('post', 'user.php?act=update_head');
xhr.send(fd);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
var res = xhr.responseText;
if(res=='1') location.reload();
}
};
}
</script>
<!--显示头像-->
<img src="{$user_info.head_url}" onclick="$('#myHead').click();">
<form action="" id='myForm' enctype="multipart/form-data">
<div style="width:0px; height:0px; overflow:hidden;">
<input type='file' name='head' id='myHead' onchange="updateHead();"/>
</div>
</form>
在user.php中添加update_head方法:
//更换头像
elseif ($action == 'update_head') {
$user_id = $_SESSION['user_id'];
if($_FILES['head']['error'] === 0){
$head_url = '../data/head/head_'.$user_id.'.jpg';
$filename = $_FILES['head']['tmp_name'];
// Content type
header('Content-Type: image/jpeg');
// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth = 150;
$newheight = 150;
// Load
$thumb = imagecreatetruecolor($newwidth, $newheight);
$ext = pathinfo($_FILES['head']['name'],PATHINFO_EXTENSION);
if($ext == 'jpg') $ext = 'jpeg';
$func = 'imagecreatefrom'. $ext;
$source = $func($filename);
// Resize
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
// Output
imagejpeg($thumb,$head_url);
}
echo '1';
}
就这样就完成了会员头像功能了。不要忘记检查一下自己的/data/head是否有head目录。。。