程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> iframe無刷新文件上傳實現程序

iframe無刷新文件上傳實現程序

編輯:關於PHP編程

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

一個最原始最簡單的iframe上傳例子:

本例中采用iframe名字,所以表單在提交時會在iframe內打開鏈接(即無刷新,確切的說應該是
感覺無刷新)
在表單提交時,調用startUpload方法,當然這是JS定義的。


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

 代碼如下 復制代碼

<title>上傳文件</title> 
 
<script> 
function CallbackFunction(str){ 
alert("上傳成功"); 

</script> 
<form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload"> 
 <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0  SCROLLING="no" style="display:NONE"></iframe> 
 <input id="test_file" name="test_file" type="file"> 
 <input value="上傳文件" type="submit"> 
</form> 


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

 代碼如下 復制代碼

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

?>

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


例2

PHP利用iframe上傳文件並返回值到父框架

淡水其實也是采用這樣的做發法的。正好看到有童鞋博客上有這樣寫。就順手貼過來了。

 代碼如下 復制代碼

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

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

 代碼如下 復制代碼

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
    // O2k7 skin
    tinyMCE.init({
        // General options
        mode : "exact",
        elements : "content",
        theme : "advanced",
        skin : "o2k7",
        language : "zh",
        relative_urls : false,
//....略過部分...

    });

    function InsertHtml(type,path){

        type=type.toLowerCase()

        switch(type){
            case '.gif':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
            case '.jpg':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
//......略過部分......
            default :
            thecode = '<a href="'+path+'" target="_blank">Download</a>';
            break;
        }
        tinyMCE.execCommand('mceInsertContent',true,thecode);
    }
</script>

iframe也就是在這個頁面裡了。
在我的iframe的提交給的php處理裡:

 代碼如下 復制代碼

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

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved