用iframe做伪ajax上传文件

由于ajax无法发送带有文件的post请求。因此为了打到ajax效果，需要借助iframe。 
原文地址

Html代码  

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

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

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

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

Php代码  

1. public function uploadImg()   
2. {  
3.     try{  
4.         if($_FILES["AidImg"]["size"]!=0)  
5.         {  
6.             $uploadPath = MB_ROOT_DIR . "/pic";  
7.             if ($_FILES["AidImg"]["size"] < 1024 * 1024 * 2) {  
8.                 if ($_FILES["AidImg"]["error"] > 0) {  
9.                     error($_FILES["AidImg"]["error"],"index.php/Campaign/campaignPublish");  
10.                 } else {  
11.                     $suffix = substr($_FILES["AidImg"]["name"], strrpos($_FILES["AidImg"]["name"], '.') + 1);  
12.                     $imgDate=date("YmdHis");  
13.                     $name = $imgDate . rand("1000", "9999") . "." . $suffix;  
14.                     if (!is_dir($uploadPath)) {  
15.                         mkdir($uploadPath);  
16.                     }  
17.                     if (move_uploaded_file($_FILES["AidImg"]["tmp_name"], $uploadPath . "/" . $name)) {  
18.                         $pf = new IBPostFile(UPLOAD_IMAGE_URL,UPLOAD_IMAGE_PORT);  
19.                         $pf->setFile("AidImg", $uploadPath . "/" . $name);  
20.                         $pf->sendRequest();  
21.                             $imgUrl = $pf->getResponse();  
22.                     }  
23.                 }  
24.             } else {  
25.                     echo "<script>parent.callback('图片大小不能超过2M',false)</script>";  
26.                 return;  
27.             }  
28.         }  
29.     }  
30.     catch(Exception $e)  
31.     {  
32.         echo "<script>parent.callback('图片上传失败',false)</script>";  
33.         return;  
34.     }  
35.     echo "<script>parent.callback('$imgUrl',true)</script>";  
36. }  

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

Javascript代码  

1. function uploadImg()  
2. {  
3.     var names=$("#AidImg").val().split(".");  
4.     if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")  
5.     {  
6.         $("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");  
7.         $("#imgError").show();  
8.         return;  
9.     }  
10.     $("#formImg").submit();  
11. }  
12.   
13. function callback(message,success)  
14. {  
15.     if(success==false)  
16.     {  
17.         $("#imgError").html("<div class='bzsj_left'></div>"+message);  
18.         $("#imgError").show();  
19.     }  
20.     else{  
21.         $("#imgError").hide();  
22.         var paths=message.split("/");  
23.         $("#img").attr("src",message);  
24.         $("input[name='imgUrl']").val(paths[paths.length-1]);  
25.     }  
26. }  

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

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