要實現無刷新文件上傳我們有一種假像的做法就是使用iframe框架實現文件上傳,另一種就是利用ajax實現文件上傳了,這兩種方法都可以達到無刷新文件上傳功能.
一個最原始最簡單的iframe上傳例子,前臺上傳頁面index.html,主要是一個表單與一個js回調函數,上傳文件時，form表單的method、 enctype屬性必須和下面代碼一樣,然后將target的值設為iframe的name,這樣就可以實現無刷新上傳文件,代碼如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>上傳文件</title>
- </head>
- <body>
- <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>
- </body>
- </html>
后臺上傳處理頁面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"]); //開源代碼Vevb.com
- echo "<script>window.parent.CallbackFunction();</script>";
- }
- ?>
以上是用iframe實現無刷新上傳文件的簡單方法,想要健壯的程序的話需要再細化.
新聞熱點
疑難解答
