PHP+iframe圖片上傳實現(xiàn)即時刷新效果
這幾天在做一個圖片上傳功能,原本想用ajax上傳圖片實現(xiàn)即時刷新,可是一直實現(xiàn)不了,唉。
后來用了iframe框架來實現(xiàn)了,不過這個用這框架卻存在一個問題,當我吧圖片上傳以后我要把上傳的路徑返回到這框架中,那么怎么取出來,開始我把值直接輸出到iframe中,但是我去取出路徑的時候一直沒反應,一直在網上查看資料,但是各種版本就是沒有一個全面的講解怎么使用iframe上傳圖片然后實現(xiàn)實時刷新的功能,只能自己研究了。大多數都是說怎么上傳就可以了,這個我也會,都斷在這還真讓人難受,只能自己研究了
既然iframe中上傳成功后輸出值到頁面中,無法取出來,試了N中方法,查了N多資料,還真是讓人蛋疼。
后來在iframe中加個src,再在圖片上傳成功后輸出值寫成一條簡單的javascript語句輸出就OK了,嘿嘿??偨Y一下吧:
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設置成隱藏的,src鏈接的頁面為圖片上傳的后臺文件頁面,不過加不加影響都不大,只不過為了更精確而已 <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> //表單的那么值對應著空框架的那么值,提交后跳轉到空框架中,這樣就不對父窗口頁面進行刷新了
提交到后臺upload.php頁面驗證后。都會有一個自己設置的路徑生成
那么我們更新圖片成功后,就可以把這個路徑拿出來,通過JS改變父窗口中圖片框中圖片路徑,重新賦值一下,這樣就相當于是刷新一下地址了,而不用每次更新成功后都得去數據庫把保存的路徑地址取出來更新了。
這里我只寫要返回的js代碼
echo "<script type='text/javascript'>window.parent.document.getElementByIdx_x('tag_img').setAttribute('src','$updurl');</script>"; //這就是在框架中輸出一段js代碼,然后操作父框架中圖片地址刷新成我上傳的圖片地址,$updurl為上傳圖片的地址
這樣就能輕松實現(xiàn)圖片上傳無刷新頁面,且圖片實現(xiàn)即使刷新了
以上這篇PHP+iframe圖片上傳實現(xiàn)即時刷新效果就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
yii2框架中使用下拉菜單的自動搜索yii-widget-select2實例分析
這篇文章主要介紹了yii2框架中使用下拉菜單的自動搜索yii-widget-select2的方法,介紹了yii-widget-select2的下載,安裝及具體使用技巧,需要的朋友可以參考下2016-01-01laravel5.1框架下的批量賦值實現(xiàn)方法分析
這篇文章主要介紹了laravel5.1框架下的批量賦值實現(xiàn)方法,結合實例形式分析了Laravel5.1框架批量賦值的相關原理與實現(xiàn)方法,需要的朋友可以參考下2019-12-12php截取字符串函數substr,iconv_substr,mb_substr示例以及優(yōu)劣分析
php進行中文字符串的截取時,會經常用到二個函數iconv_substr和mb_substr,對這二個函數應該如何選擇呢?參考下本文介紹的例子就明白了。2014-06-06