|
|
本文實例講述了php+iFrame實現頁面無需刷新的異步文件上傳，是非常實用的常見技巧。分享給大家供大家參考。具體分析如下：
說到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頁面如下:
<!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>iFrame異步文件上傳</title> </head> <body> <h1>iFrame異步文件上傳</h1> <form method="post" enctype="multipart/form-data"> 用戶名: <input type="text" name="username" /><br /> 上傳頭像: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" /> <iframe style="display:none" mce_style="display:none" name="uploadframe"></iframe> <input type="hidden" id="photo" name="photo" value="" /> <div id="displayphoto"></div> <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" /> </form> <?php //頁面提交后顯示相關信息 if (isset($_POST['submitted'])) { $html = '<hr /><p>上傳成功！</p>'; $html .= '<p>用戶名：'.htmlspecialchars($_POST['username']).'</p>'; $html .= '<p>頭像地址：'.htmlspecialchars($_POST['photo']).'</p>'; $html .= '<div><img src="'.htmlspecialchars($_POST['photo']).'" mce_src="'.htmlspecialchars($_POST['photo']).'" /></div><hr />'; echo $html; } ?> </body> </html> <mce:script type="text/Javascript"><!-- //選擇了文件后開始異步上傳 function startUpload(oForm) { document.getElementById('displayphoto').innerHTML = 'Loading...'; oForm.action = 'proceedupload.php'; oForm.target = 'uploadframe'; oForm.submit(); } //整個頁面的提交 function formSubmit(oForm) { oForm.action = document.URL; oForm.target = '_self'; oForm.submit(); } // --></mce:script>
proceedupload.php頁面如下:
<?php //這里僅以特定圖片格式舉例，本應動態獲取 $url = 'upload/img' . time() . '.jpg'; if (move_uploaded_file($_FILES['uploadphoto']['tmp_name'], $url)) { //刪除之前的圖片 $_POST['photo'] !== '' && unlink($_POST['photo']); ?> <html> <head> <body onLoad="doneLoading(parent, '<?=$url?>')"> </body> </html> <mce:script type="text/Javascript"><!-- //在頁面上顯示剛剛上傳成功的圖像 function doneLoading(theFrame, url) { var oDiv = theFrame.document.getElementById('displayphoto'); oDiv.innerHTML = '<img src="' + url + '" mce_src="' + url + '" alt="上傳頭像" />'; theFrame.document.getElementById('photo').value = url; } // --></mce:script> <?php }?>
感興趣的朋友可以測試運行一下本文實例，相信本文所述對大家php程序設計的學習有一定的借鑒價值。
php技術：PHP+iFrame實現頁面無需刷新的異步文件上傳，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
