使用ajaxfileupload插件实现异步上传并保存图片功能

浏览数：62 / 时间：2015年06月09日

使用jquery插件ajaxfileupload.js可以实现页面无刷新上传图片文件，后台管理有关图片的上传功能可以利用它，很方便

一、目标效果:
1.前端，页面上传多张图片时，POST到服务器端，页面能立即显示图片效果，并且不刷新页面
2.后台,页面POST过来的图片被重命名并保存到服务器

二、思路：
1.封装一个js函数uploadimg(imgid,fileid,hiddenid),里面调用ajaxfileupload.js的函数$.ajaxFileUpload()将标签input type=’file’ 里的文件ajax方式上传到服务器，上传成功后接收返回json数据——图片在服务器端的路径data.path，将该值赋给img标签和对应的隐藏域
2.在服务器端有个专门处理ajax上传图片的php文件，首先判断文件类型和大小是否合法，然后将文件重命名并且移动一个文件暂存区，然后json格式返回图片路径给前端页面
3.等到页面真正提交表单信息到后台保存时，后台根据隐藏域中的图片路径值，将暂存区中的图片移动到真正永久保存图片的文件夹中

三、代码:
1.前端：
①html页面:

<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel=‘stylesheet‘ type="text/css" href=‘/assets/css/own/img.css‘ />
    <script src="/assets/js/jquery-1.4.2.min.js"></script>
    <script src="/assets/js/ajaxfileupload.js"></script>
    <script src="/assets/js/own/uploadimg.js"></script>
    <title>upload image</title>
</head>
<body>
    <form id="w0" action="imgfile.php" name="form1" method="post" enctype="multipart/form-data" >
    <div> 
        <input type="file" name="fileImg" id="fileImg" onchange="uploadimg(‘img1‘,‘fileImg‘,‘hidden1‘)" accept="image/jpeg,image/png,image/gif"><br />  
        <input type="hidden" name="hidden1" value="" />
        <img class="load0" name="img1" id="img1" src="" />
    </div>
    <br /><br />
    <div> 
        <input type="file" name="fileImg2" id="fileImg2" onchange="uploadimg(‘img2‘,‘fileImg2‘,‘hidden2‘)" accept="image/jpeg,image/png,image/gif"><br />  
        <input type="hidden" name="hidden2" id="hidden2" value="" />
        <img class="load0" name="img2" id="img2" src="" />
    </div>
    <br /><br />
    <input type="submit" value="ok">
    </form>
</body>
</html>

②uploadimg.js代码，这里面调用了ajaxfileupload.js的函数来实现ajax图片文件上传，以及接收返回值后控制前端页面显示

 function uploadimg(imgid,fileid,hiddenid) {
 //imgid指<img />标签id,fileid表示<input type=‘file‘ />文件上传标签的id,hiddenid指隐藏域标签id
    $("#"+imgid).attr("src","/assets/img/loading/load.gif").removeClass("load0");//加载loading图片
    $.ajaxFileUpload
    (
        {            
            url: ‘http://127.0.0.1/common/upImgfile.php‘,
            secureuri: false,
            fileElementId: fileid,  
            dataType: ‘json‘,              
            success: function (data, status)
            {   //data的内容都是在后台php代码中自定义的,json格式返回后在这里以对象的方式的访问
                if(typeof (data.error) != ‘undefined‘){//上传文件出错
                  var error_msg="";
                  switch(data.error)
                  {
                    case "101": error_msg="文件类型错误";
                        break;
                    case "102": error_msg="文件过大";
                        break;
                    case "400": error_msg="非法上传";
                        break;
                    case "404": error_msg="文件为空";
                        break;
                    default :error_msg="服务器不稳定";
                  }
                  alert(error_msg);
                }else{
                    $("#"+imgid).attr("src",data.path).addClass("load1");//加载返回的图片路径并附加上样式
                    $("#"+hiddenid).val(data.path);//给对应的隐藏域赋值，以便提交时给后台
                }               
            },
            error: function (data, status, e)
            {
                alert(e);
            }
        }
    )
}

2.后台:
upImgfile.php代码:

<?php
//接收POST方式上传的文件，存放到临时文件夹

if(isset($_FILES)&&(!empty($_FILES))){
    foreach($_FILES as $el)//获取文件，这里默认都是每次都单文件上传
    {
        $file=$el;
    }
    if(is_uploaded_file($file["tmp_name"])){//确认是POST方式上传的文件
        $cache_path="../assets/uploads/cache/";//暂存文件的目录
        $fname=$file["name"];//获取文件名
        $ftype=$file["type"];//获取文件类型
        $ftmp_name=$file["tmp_name"];//获取临时文件路径
        $fsize=$file["size"];//获取文件大小
        $ferror=$file["error"];//获取文件错误代号

        //判断文件大小是否符合规则
        if(!check_size($fsize)){
            echo json_encode(array("error"=>"102"));//102错误码代表文件过大
            exit;
        }

        $suffix=strtolower(stristr($fname, "."));//获取文件后缀名(包含了点号),并后缀名小写化
        //判断文件类型是否为图片
        if(!is_img($suffix)){
            //如果不是图片类型，直接返回error为101，代表文件类型错误
            echo json_encode(array("error"=>"101"));
            exit;
        }

        $uniqStr=uniqid(strtotime("now")."_".mt_rand(100000,999999)."_");//创建随机ID
        $fname_new = $cache_path.$uniqStr.$suffix;//利用当前时间戳构造新的文件名称      
        move_uploaded_file($ftmp_name, $fname_new);//将临时文件区的文件移动到暂存区中  
        $fname_new=stristr($fname_new,"/");
        echo json_encode(array("path"=>$fname_new));//返回文件路径给看、客户端 
    }else{  
            echo json_encode(array("error"=>"400"));//400错误码代表文件非法上传(不是httppost提交)
    }

}else{
    echo json_encode(array("error"=>"404"));//404错误码代表文件为空
}


/**
*判断文件后缀是否是图片
*@param string $suffix :带点的后缀名(如.jpg)
*@return bool 如果是图片后缀名返回true,否则返回false
*/
function is_img($suffix){
    $suffix_arr=array(‘.jpg‘,‘.png‘,‘.gif‘,‘.jpeg‘,‘.bmp‘);    
    return in_array(strtolower($suffix), $suffix_arr);
}

/**
*判断文件大小是否非法
*@param int $size :单位为byte的整数，文件大小
*@return bool 如果文件大小小于或等于规定的最大值返回true,否则返回false
*/
function check_size($size){    
    $postMaxSize=intval(ini_get("post_max_size"));//post文件最大值
    $uploadMaxFilesize = intval(ini_get("upload_max_filesize"));//upload上传文件最大值
    $max=min($postMaxSize,$uploadMaxFilesize) *1024*1024;//将MB转换为byte单位数据
    if(intval($size)<=$max){
        return true;
    }else{
        return false;
    }
}