溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關怎么在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>
<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
//頁面提交后顯示相關信息
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中利用iFrame實現一個異步文件上傳功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
