快捷導(dǎo)航

PHP+iframe圖片上傳實(shí)現(xiàn)即時(shí)刷新效果

更新時(shí)間：2016年11月18日 10:06:50 投稿：jingxian

下面小編就為大家?guī)硪黄狿HP+iframe圖片上傳實(shí)現(xiàn)即時(shí)刷新效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

這幾天在做一個(gè)圖片上傳功能，原本想用ajax上傳圖片實(shí)現(xiàn)即時(shí)刷新，可是一直實(shí)現(xiàn)不了，唉。

后來用了iframe框架來實(shí)現(xiàn)了，不過這個(gè)用這框架卻存在一個(gè)問題，當(dāng)我吧圖片上傳以后我要把上傳的路徑返回到這框架中，那么怎么取出來，開始我把值直接輸出到iframe中，但是我去取出路徑的時(shí)候一直沒反應(yīng)，一直在網(wǎng)上查看資料，但是各種版本就是沒有一個(gè)全面的講解怎么使用iframe上傳圖片然后實(shí)現(xiàn)實(shí)時(shí)刷新的功能，只能自己研究了。大多數(shù)都是說怎么上傳就可以了，這個(gè)我也會(huì)，都斷在這還真讓人難受，只能自己研究了

既然iframe中上傳成功后輸出值到頁面中，無法取出來，試了N中方法，查了N多資料，還真是讓人蛋疼。

后來在iframe中加個(gè)src，再在圖片上傳成功后輸出值寫成一條簡(jiǎn)單的javascript語句輸出就OK了，嘿嘿?？偨Y(jié)一下吧：

html代碼：

<iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe> //iframe設(shè)置成隱藏的，src鏈接的頁面為圖片上傳的后臺(tái)文件頁面，不過加不加影響都不大，只不過為了更精確而已
<img id="tag_img" src="" />
<form enctype="multipart/form-data" action="upload.php" method="post" target="upload_target">
   <input type="file" name="userfile" class="file" value="" />
   <input type="submit" name="uploadimg" value="上傳" />
</form> //表單的那么值對(duì)應(yīng)著空框架的那么值，提交后跳轉(zhuǎn)到空框架中，這樣就不對(duì)父窗口頁面進(jìn)行刷新了

提交到后臺(tái)upload.php頁面驗(yàn)證后。都會(huì)有一個(gè)自己設(shè)置的路徑生成

那么我們更新圖片成功后，就可以把這個(gè)路徑拿出來，通過JS改變父窗口中圖片框中圖片路徑，重新賦值一下，這樣就相當(dāng)于是刷新一下地址了，而不用每次更新成功后都得去數(shù)據(jù)庫(kù)把保存的路徑地址取出來更新了。

這里我只寫要返回的js代碼

echo "<script type='text/javascript'>window.parent.document.getElementByIdx_x('tag_img').setAttribute('src','$updurl');</script>"; //這就是在框架中輸出一段js代碼，然后操作父框架中圖片地址刷新成我上傳的圖片地址，$updurl為上傳圖片的地址

這樣就能輕松實(shí)現(xiàn)圖片上傳無刷新頁面，且圖片實(shí)現(xiàn)即使刷新了

以上這篇PHP+iframe圖片上傳實(shí)現(xiàn)即時(shí)刷新效果就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: