快捷導(dǎo)航

PHP+iFrame實現(xiàn)頁面無需刷新的異步文件上傳

更新時間：2014年09月16日 10:21:51 投稿：shichen2014

這篇文章主要介紹了PHP+iFrame實現(xiàn)頁面無需刷新的異步文件上傳,包含了iframe框架與form表單的運用及PHP文件上傳等技巧,需要的朋友可以參考下

本文實例講述了PHP+iFrame實現(xiàn)頁面無需刷新的異步文件上傳，是非常實用的常見技巧。分享給大家供大家參考。具體分析如下：

說到iframe，現(xiàn)在用它的人是越來越少了，并且很多人都相信它應(yīng)該被AJAX所取代，的確如此，因為AJAX太出色了。

不過有一種情況的實現(xiàn)我還是選擇了iframe，這就是本文要說的文件的異步上傳，感興趣的可以試試，如果用原生的AJAX來實現(xiàn)應(yīng)該是要復(fù)雜的多。

先來給初學(xué)者補(bǔ)補(bǔ)基礎(chǔ)知識：

1. 在iframe標(biāo)簽一般會指定其name特性以于標(biāo)識；
2. 在form表單中通過action(目標(biāo)地址)和target(目標(biāo)窗口，默認(rèn)為_self)來確定提交的目的地；
3. 將form中的target指向iframe的name，則可將表單提交到了隱藏框架iframe中；
4. iframe里的內(nèi)容實際上也是一個頁面，其中的js里的parent對象指代父頁面，即嵌入iframe的頁面；
5. PHP中用move_uploaded_file()函數(shù)來實現(xiàn)文件上傳，$_FILES數(shù)組存儲有上傳文件的相關(guān)信息。

本文實現(xiàn)的是一個用戶選擇了頭像文件后立刻上傳并顯示在頁面上的例子，廢話不多說，思路是這樣的：

1. 在表單中嵌入一個iframe，設(shè)定好name特性值；
2. 在選擇文件上傳的控件的值改變時觸發(fā)一個js函數(shù)，該函數(shù)將表單提交至iframe，而iframe內(nèi)嵌的頁面用來處理文件上傳；
3. 在iframe中完成了文件上傳之后，在js中通過parent來操作父頁面，在特定的標(biāo)簽內(nèi)顯示圖片，并將圖片的保存地址賦給一個隱藏域；
4. 回到原來的頁面，現(xiàn)在既完成了文件的上傳，也在隱藏域內(nèi)記錄了文件的路徑，整個過程沒有刷新頁面；
5. 最后用戶只需提交原來的頁面時重置表單的action和target屬性的值即可。

下面是效果截圖和實現(xiàn)的代碼：

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  
//頁面提交后顯示相關(guān)信息 
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 
//這里僅以特定圖片格式舉例，本應(yīng)動態(tài)獲取 
$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程序設(shè)計的學(xué)習(xí)有一定的借鑒價值。

您可能感興趣的文章: