PHP iFrame實現頁面無需重新整理的非同步檔案上傳

2022-09-28 19:45:19 字數 1185 閱讀 3253

說到iframe,現在用它的人是越來越少了,並且很多人都相信它應該被ajax所取代,的確如此,因為ajax太出色了。

不過有一種情況的實現我還是選擇了iframe,這就是本文要說的檔案的非同步上傳,感興趣的可以試試,如果用原生的ajax來實現應該是要複雜的多。

先來給初學者補補基礎知識:

1. 在iframe標籤一般會指定其name特性以於標識;

2. 在form表單中通過action(目標位址)和target(目標視窗,預設為_self)來確定提交的目的地;

3. 將form中的target指向iframe的name,則可將表單提交到了隱藏框架iframe中;

4. iframe裡的內容實際上也是乙個頁面,其中的js裡的parent物件指代父頁面,即嵌入iframe的頁面;

5. php中用move_uploaded_file()函式來實現檔案上傳,$_files陣列儲存有上傳檔案的相關資訊。

本文實現的是乙個使用者選擇了頭像檔案後立刻上傳並顯示在頁面上的例子,廢話不多說,思路是這樣的:

1. 在表單中嵌入乙個iframe,設定好name特性值;

2. 在選擇檔案上傳的控制項的值改變時觸發乙個js函式,該函式將表單提交至iframe,而iframe內嵌的頁面用來處理檔案上傳;

3. 在iframe中完成了檔案上傳之後,在js中通過parent來操作父頁面,在特定的標籤內顯示,並將的儲存位址賦給乙個隱藏域;

4. 回到原來的頁面,現在既完成了檔案的上傳,也在隱藏域內記錄了檔案的路徑,整個過程沒有重新整理頁面;

5. 最後使用者只需提交原來的頁面時重置表單的action和target屬性的值即可。

下面是效果截圖和實現的**:

upload.php頁面如下:

iframe非同步檔案上傳<?php //頁面提交後顯示相關資訊

if (isset($_post['submitted']))

?>

proceedupload.php頁面如下:

<?php //這裡僅以特定格式舉例,本應動態獲取

本文標題: php+iframe實現頁面無需重新整理的非同步檔案上傳

本文位址:

Ajax實現頁面無重新整理留言效果

利用ajax實現頁面無重新整理留言效果 實現效果 前言 在貼吧,以及一些論壇中,當你回覆或者評論完畢之後,從來沒有見過頁面重新重新整理載入的效果,那麼這個究竟是怎麼做成的呢,也就是利用ajax技術,頁面無重新整理效果,廢話不多說,直接上 實現效果 html部分 程式設計客棧 正在拼命載入資料.稱呼 ...

頁面無重新整理分頁

分頁 頁面無重新整理源 由下面三部分組成 一 前台 二 web服務 namespace ajax list.add article cmd.dispose conn.close conn.dispose return list 根據使用者設定每頁顯示的記錄數量 獲取總的頁數 webmethod pu...

PHP Ajax實現頁面無重新整理發表評論

大家都有在 發表評論的經歷,傳統的發表過程無非是 發表 提交頁面表單 等待重新整理頁面,這樣在網路比較擁擠的時候,往往需要漫長的等待,今天介紹用php ajax實現頁面無重新整理發表評論,希望對初學ajax的phper有所幫助。那麼首先,我們需要乙個基本的ajax開發框架,檔案ajax.js就包含了...