thinkphp ajax图片上传方法

<form id="formImg" action="uploadImg"  method="post"  target="hidden_frame" enctype="multipart/form-data">
   <div class="fromtrs">
      <label>[i]*[/i]活动海报：</label>
      <input id="AidImg" class="sstp" type="file" name="AidImg" onchange="uploadImg()"/>    
      <div class="sjjt" style="display:none;" id="imgError">
      <div class="bzsj_left"></div>活动海报不可为空</div>
   </div>
</form> 
<iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>
<div class="fromtrs">
   <img id="img" src="" width="80" height="80"/>
</div>

orm表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe。 
这样表单提交之后，文件会被上传，但是页面却不会刷新，因为表单提交后被刷新页面为隐藏的iframe，因此用户看到的效果和ajax处理的效果是一样的。 

现在看到的效果是和ajax一样了，但是ajax是有返回值的。但是现在我们值刷新了iframe页面，却没有ajax的返回值，不知道操作到底是成功了还是失败了。因此需要在页面中写一个js的callback方法，然后在处理上传操作成功后来调用这个callback方法。 

这个例子是php做的文件处理，其他语言同理。 

public function uploadImg()    
{
    try{
        if($_FILES["AidImg"]["size"]!=0)
        {
            $uploadPath = MB_ROOT_DIR . "/pic";
            if ($_FILES["AidImg"]["size"] < 1024 * 1024 * 2) {
                if ($_FILES["AidImg"]["error"] > 0) {
                    error($_FILES["AidImg"]["error"],"index.php/Campaign/campaignPublish");
                } else {
                    $suffix = substr($_FILES["AidImg"]["name"], strrpos($_FILES["AidImg"]["name"], '.') + 1);
                    $imgDate=date("YmdHis");
                    $name = $imgDate . rand("1000", "9999") . "." . $suffix;
                    if (!is_dir($uploadPath)) {
                        mkdir($uploadPath);
                    }
                    if (move_uploaded_file($_FILES["AidImg"]["tmp_name"], $uploadPath . "/" . $name)) {
                        $pf = new IBPostFile(UPLOAD_IMAGE_URL,UPLOAD_IMAGE_PORT);
                        $pf->setFile("AidImg", $uploadPath . "/" . $name);
                        $pf->sendRequest();
                            $imgUrl = $pf->getResponse();
                    }
                }
            } else {
                    echo "<script>parent.callback('图片大小不能超过2M',false)</script>";
                return;
            }
        }
    }
    catch(Exception $e)
    {
        echo "<script>parent.callback('图片上传失败',false)</script>";
        return;
    }
    echo "<script>parent.callback('$imgUrl',true)</script>";
}

echo "<script>parent.callback('图片上传失败',false)</script>"; 
这句花，调用了iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。

Javascript代码  

function uploadImg()
{
    var names=$("#AidImg").val().split(".");
    if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
    {
        $("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");
        $("#imgError").show();
        return;
    }
    $("#formImg").submit();
}

function callback(message,success)
{
    if(success==false)
    {
        $("#imgError").html("<div class='bzsj_left'></div>"+message);
        $("#imgError").show();
    }
    else{
        $("#imgError").hide();
        var paths=message.split("/");
        $("#img").attr("src",message);
        $("input[name='imgUrl']").val(paths[paths.length-1]);
    }
}

这里是页面的callback方法，接受了上传图片处理后返回的结果。 

这样，就用iframe模拟了ajax来上传文件。