|
|
本文實(shí)例講述了php+iFrame實(shí)現(xiàn)頁面無需刷新的異步文件上傳，是非常實(shí)用的常見技巧。分享給大家供大家參考。具體分析如下：
說到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對(duì)象指代父頁面，即嵌入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)的代碼：
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(); } //整個(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 }?>
感興趣的朋友可以測(cè)試運(yùn)行一下本文實(shí)例，相信本文所述對(duì)大家php程序設(shè)計(jì)的學(xué)習(xí)有一定的借鑒價(jià)值。
php技術(shù)：PHP+iFrame實(shí)現(xiàn)頁面無需刷新的異步文件上傳，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
