PHP+ajaxfileupload 实现用户头像上传

今天写项目的时候需要一个让登录的用户上传头像的功能，然后上网搜了一下，发现有一个不错的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这个插件的过程中也出现了一些错误，建议大家上网搜索一下，有很多相同问题的解决方案。

最后，希望自己和在学习中成长的人每天都能多学一点点，让技术有所提升，同时也收获更多的成就感和充实感。