php實現無刷新上傳文件功能詳解

前段時間做個ajax的應用，其中涉及到一個上傳文件，然後從文件中讀取相關內容的操作。php上傳文件不難，難就難在頁面要無刷新，想來想去沒什麼招，後來baidu下，找到個方法，成功實現無刷新上傳文件。我把思路整理下，和朋友們共享，也歡迎提出批評指導意見。
技巧：利用form表單的target屬性和iframe。
不喜歡看大段代碼的朋友可以自己思考下。文章底部有提供完成的測試程序。

一、上傳文件的一個php方法。
該方法接受一個$file參數，該參數為從客戶端獲取的$_FILES變量，返回重新命名後的文件名，如果上傳失敗，則返回空字符串。
php代碼

    function uploadFile($file) {
        // 上傳路徑     $destinationPath = "./upload/";
        if (!file_exists($destinationPath)){
            mkdir($destinationPath , 0777);     }
        //重命名
        $fileName = date(YmdHis) . _ . iconv(utf-8 , gb2312 , basename($file[name]));
        if (move_uploaded_file($file[tmp_name], $destinationPath . $fileName)) {         return iconv(gb2312 , utf-8 , $fileName);
        }     return ;
      }

二、客戶端HTML代碼
這裡正是技巧所在，添加另一個iframe來實現。表單標簽form定義了一個屬性target，該屬性解釋如下：
[pre]target屬性：
_blank   ----------   新開窗口
_self   -----------   自身
_top   ------------   主框架
_parent   ---------   父框架
自定義名字     -----   出現於框架結構，將會在該名稱的框架內打開鏈接

本例中采用iframe名字，所以表單在提交時會在iframe內打開鏈接（即無刷新，確切的說應該是
感覺無刷新）
在表單提交時，調用startUpload方法，當然這是JS定義的。
[/pre][pre]此外我們還定義一個span來顯示提示信息。代碼如下：
[/pre]xhtml代碼

    <form id="upForm" action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload()"> 導入文件：<input type="file" name="myfile" id="myfile" />
    <input type="submit" name="submitBtn" value="導入" /> <iframe id="upload_target" name="upload_target" src="#" >iframe>
    form> <span id="info">span>

三、JS部分
這部分比較簡單，只是顯示提示信息
javascript代碼
    function startUpload() {
        var spanObj = document.getElementById("info");     spanObj.innerHTML = " 開始上傳";
    }
    function stopUpload(responseText){     var spanObj = document.getElementById("info");
        spanObj.innerHTML = " 上傳成功;     spanObj.innerHTML = responseText;
      }
接下來就要看服務器端得處理了。

四、服務器段處理部分
php代碼

    $file = $_FILES[myfile];   $fileName = uploadFile($file);
      $result = readFromFile("./upload/" . $fileName);

此外在後面還應該加上一句JS代碼用來調用stopUpload方法。
javascript代碼

      window.top.window.stopUpload("");

最後在補上php中的readFromFile方法，就大功告成了。
php代碼

    function readFromFile($target_path) {
        // 讀取文件內容     $file = fopen($target_path,r) or die("unable to open file");
        $fileContent = ;     while(!feof($file))
        {         $str = fgets($file);
            $fileContent .= $str;     }
        fclose($file);     return $fileContent;
      }