怎么在PHP中利用iFrame實(shí)現(xiàn)一個(gè)異步文件上傳功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在PHP中利用iFrame實(shí)現(xiàn)一個(gè)異步文件上傳功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、懷遠(yuǎn)網(wǎng)絡(luò)推廣、小程序制作、懷遠(yuǎn)網(wǎng)絡(luò)營銷、懷遠(yuǎn)企業(yè)策劃、懷遠(yuǎn)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供懷遠(yuǎn)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

具體分析如下：

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

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

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

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

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

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

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

怎么在PHP中利用iFrame實(shí)現(xiàn)一個(gè)異步文件上傳功能

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> 
<h2>iFrame異步文件上傳</h2> 
<form method="post" enctype="multipart/form-data"> 
  用戶名: <input type="text" name="username" /><br /> 
  上傳頭像: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" /> 
  <iframe  mce_ 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(); 
} 
//整個(gè)頁面的提交 
function formSubmit(oForm) { 
  oForm.action = document.URL; 
  oForm.target = '_self'; 
  oForm.submit(); 
} 
// --></mce:script>

proceedupload.php頁面如下:

<?php 
//這里僅以特定圖片格式舉例，本應(yīng)動(dò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中利用iFrame實(shí)現(xiàn)一個(gè)異步文件上傳功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：怎么在PHP中利用iFrame實(shí)現(xiàn)一個(gè)異步文件上傳功能-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article20/degjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容