iframe無刷新文件上傳其實就是在當前頁面打開了上傳程序的頁面,有點像ajax局部刷新一個,只是我們把它放到了iframe頁面中上傳,同時我們把iframe頁面給隱藏了。

一個最原始最簡單的iframe上傳例子:本例中采用iframe名字,所以表單在提交時會在iframe內打開鏈接（即無刷新，確切的說應該是感覺無刷新）,在表單提交時,調用startUpload方法,當然這是JS定義的。

前臺上傳頁面index.html,主要是一個表單與一個js回調函數,上傳文件時，form表單的method、 enctype屬性必須和下面代碼一樣。然后將target的值設為iframe的name，這樣就可以實現無刷新上傳文件,代碼如下:

1. <title>上傳文件</title>   
2. <script>   
3. function CallbackFunction(str){   
4. alert("上傳成功");   
5. }   
6. </script>   
7. <form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload">   
8.  <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0  SCROLLING="no" style="display:NONE"></iframe>   
9.  <input id="test_file" name="test_file" type="file">   
10.  <input value="上傳文件" type="submit">   
11. </form>  

后臺上傳處理頁面uploadfile.php，這段代碼為簡單的上傳代碼，沒有進行錯誤及異常處理。上傳代碼執行完成后，要告訴父頁面已經上傳完畢了，因此，在這個頁面里調用父頁面的回調函數CallbackFunction，這個函數可以有參數，形式自己定義,代碼如下:

1. <?php   
2. set_time_limit(0);   
3. if($_SERVER['REQUEST_METHOD']=='POST') {   
4.   move_uploaded_file($_FILES["test_file"]["tmp_name"],   
5.   dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]);   
6.   echo "<script>window.parent.CallbackFunction();</script>";   
7. }  
8. ?> 

以上是用iframe實現無刷新上傳文件的簡單方法,想要健壯的程序的話需要再細化.

PHP無刷新實例2:PHP利用iframe上傳文件并返回值到父框架,其實也是采用這樣的做發法的,正好看到有童鞋博客上有這樣寫,就順手貼過來了,代碼如下:

1. if($result)      
2. {     
3. echo "上傳成功!文件路徑為：".$file2;     
4. echo '<input name="img" type="hidden" value="'.$file2.'" id="img"/>';     
5. echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>';     
6. } 

文件上傳成功后,把文件路徑寫入一個隱藏的域中(img),然后用DOM原理把隱藏域中的VALUE發送到父框架的表單form1的img文本框中:ok,編輯器用了tinyMCE,所以有一點點不一樣,我的form頁,代碼如下:

1. <script src="tiny_mce/tiny_mce.js" type="text/javascript"></script> 
2. <script type="text/javascript"> 
3.     // O2k7 skin 
4.     tinyMCE.init({ 
5.         // General options 
6.         mode : "exact", 
7.         elements : "content", 
8.         theme : "advanced", 
9.         skin : "o2k7", 
10.         language : "zh", 
11.         relative_urls : false, 
12. //....略過部分... 
13.     }); 
14.     function InsertHtml(type,path){ 
15.         type=type.toLowerCase() 
16.         switch(type){ 
17.             case '.gif': 
18.             thecode = '<img src="'+path+'" alt=""/>'; 
19.             break; 
20.             case '.jpg': 
21.             thecode = '<img src="'+path+'" alt=""/>'; 
22.             break; 
23. //......略過部分...... 
24.             default : 
25.             thecode = '<a href="'+path+'" target="_blank">Download</a>'; 
26.             break; 
27.         } 
28.         tinyMCE.execCommand('mceInsertContent',true,thecode); 
29.     } 
30. </script> 

iframe也就是在這個頁面里了,在我的iframe的提交給的php處理里,代碼如下:

1. $pasteJS = "<script type=text/javascript>n"; 
2. $pasteJS .= "parent.InsertHtml("" . $file_ext . "","" . $upload_src . "");n"; 
3. $pasteJS .= "</script>n"; 
4. echo $pasteJS; 

于是上傳的文件就跑到tinyMCE的編輯框里了,upload的文件路徑也通過userdata會暫存起來，直到寫入database。路徑保存這塊兒，也是在iframe的提交給的php處理文件里的，這里就不多寫了。