今天写项目的时候需要一个让登录的用户上传头像的功能,然后上网搜了一下,发现有一个不错的Ajax插件ajaxfileupload,所以就拿来用,感觉效果不错,在这里和大家分享一下。下面将用PHP+ajaxfileupload 实现用户头像上传。
1. 简单介绍一下ajaxfileupload
ajaxfileupload 是Ajax的一个插件,用于实现异步上传文件,它不仅可以上传图片,还可以上传其他类型的文件,这对于减轻编程人员的编码压力是十分有用的。
2. 下载ajaxfileupload
现在网上有很多下载的地方,这里提供一个放在网盘上的文件 http://pan.baidu.com/s/1c09Ieje
3. 在html文件中引入
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
(注意:这里一定要连同jQuery文件一起引入,而且顺序为jQuery >> ajaxfileupload)
4. html文件中编写代码
<input type="file" id="Filedata" name="Filedata" class="UploadImg" multiple accept="image/*" >
(注意:这里的id和name要取同样的名字,否则会出错)
5. 完整的弹出框
<div class="pop pageSetting" style="display:none">
<!-- 修改头像 -->
<div class="changeUserPic">
<div class="preview">
<div class="previewPic">
<?php if(empty($icon_url)):?>
<img width="150px" height="150px" src="__IMG__/user_pic.png">
<?php else:?>
<img width="150px" height="150px" src="{$icon_url}">
<?php endif;?>
</div>
<div class="choosePic">
<input type="file" id="Filedata" name="Filedata" class="UploadImg" multiple accept="image/*" >
<span></span>
</div>
</div>
<div class="clear"></div>
<div class="savePicture">
<a href="#">保存</a>
</div>
<div class="canclePicture">
<a href="javascript:void">取消</a>
</div>
</div>
</div>
这个弹出框的效果是这样的:
当然还需要写下CSS代码,这里就不多说了。
6. 照片预览
一般的头像上传都会有个预览功能,但是我们没理由将照片上传到服务器上再预览吧,这个时候,我们可以用js实现预览功能
//上传头像预览
$('.choosePic').on('change', '.UploadImg', function(){
var file = this.files[0];
//判断类型是不是图片
if(!/image\/\w+/.test(file.type)){
$('.choosePic span').html('文件只能为图片类型');
return false;
}
//判断照片是否小于2M
if(file.size > 2*1024*1024){
$('.choosePic span').html('图片大小不能超过2M');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$('.previewPic img').attr('src',this.result) //就是base64
}
});
这里使用了jQuery的FileReader方法,其readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成,readyState变为DONE, loadend被触发,此时result属性包含数据:URL以base64编码的字符串表示文件的数据。只要点击了上面的“浏览”按钮并选择了图片文件,就会在指定的位置生成预览。(注意这里只是在本地预览,并没有上传到服务器上)
7. 正式使用ajaxfileupload上传图片
//正式上传头像--使用ajaxfileupload.js上传
$('.savePicture').click(function(){
$.ajaxFileUpload({
url: '/User/changeUserPic',
type: 'post',
secureuri: false, //一般设置为false
fileElementId: 'Filedata', // 上传文件的id、name属性名
dataType: 'json',
success:function(list){
var errCode = list.codeNum;
var errMsg = list.msg;
//errCode为0、1、2、3、5、6均为上传不成功
if(errCode==0||errCode==1||errCode==2||errCode==3||errCode==5||errCode==6){
$('.choosePic span').html(errMsg);
return;
} else if(errCode == 4){
popSetting.hide();
$('.userImg img').attr('src',list.path);
$('.site-info img').attr('src',list.path);
}
},
error:function(data, status, e){
alert(e)
}
});
});
在这里,当出发上面的保存按钮时,边开始执行ajaxfileupload进行图片异步上传,其中success后的函数代表成功上传后要做的操作,这里我是将网站中当前页面有用户头像的部分都做了更新,效果杠杠的。而error后的函数可以将错误信息弹出,方便调试(建议正式上线之后去掉)
8. 后台PHP处理代码
/**
* 修改用户头像 - Ajax提交验证
* @return void
*/
public function changeUserPic(){
$msg = array();
//设置图片要上传保存到服务器的绝对路径
$path = $_SERVER['DOCUMENT_ROOT'].'/Public/UserPicture/';
//图片显示的路径
$showPath = '';
if(isset($_FILES['Filedata'])){
//若上传错误,则弹出错误id
if($_FILES['Filedata']['error'] > 0){
$resultCode = 0;
$resultMsg = '错误代码:'.$_FILES['Filedata']['error'];
} else if($_FILES['Filedata']['size'] > (2*1024*1024)){
$resultCode = 1;
$resultMsg = '上传照片请不要大于2M';
} else {
$division = pathinfo($_FILES['Filedata']['name']);
$extensionName = $division['extension']; //获取文件扩展名
//如果上传文件不是图片,则不保存
if( !in_array($extensionName, array('jpg', 'gif', 'png', 'jpeg'))){
$resultCode = 2;
$resultMsg = '错误:只可以上传图片';
} else {
//对图片进行保存
$pattern='1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLOMNOPQRSTUVWXYZ';
for($i=0; $i<10; $i++)
{
$key .= $pattern{mt_rand(0,35)}; //生成php随机数
}
$newFileName = sha1(date('Y-m-d',time()).$key).'.'.$extensionName;
$savePath = $path.$newFileName; //图片的存储路径
$showPath = '/Public/UserPicture/'.$newFileName;
move_uploaded_file($_FILES['Filedata']['tmp_name'], $savePath);
if(!file_exists($savePath)){
$resultCode = 3;
$resultMsg = '上传失败';
} else {
//将图片路径添加到用户数据表中
$userApi = new GglUserApi;
$icon_url = $userApi->getUserIconUrl();
$res = $userApi->changeIconPath($showPath);
if($res){
$resultCode = 4;
$resultMsg = '上传成功';
//这里需要将原有的图片删除
if(!empty($icon_url)){
unlink($_SERVER['DOCUMENT_ROOT'].$icon_url);
}
} else {
$resultCode = 6;
$resultMsg = '保存到数据库失败';
//这里需要将上传的图片删除掉
unlink($savePath);
}
}
}
}
} else {
$resultCode = 5;
$resultMsg = '文件未上传';
}
echo json_encode(array(
'codeNum' => $resultCode,
'msg' => $resultMsg,
'path' => $showPath,
));
}
这个部分熟悉的人一看就明白了,不熟悉的童鞋研究下,就不多写了。
总的来说,使用这个插件进行头像无刷新上传给用户的体验是不错的,加上本地的预览,简洁明了,方便极了。当然使用ajaxfileupload这个插件的过程中也出现了一些错误,建议大家上网搜索一下,有很多相同问题的解决方案。
最后,希望自己和在学习中成长的人每天都能多学一点点,让技术有所提升,同时也收获更多的成就感和充实感。