這幾天在做一個圖片上傳功能,原本想用ajax上傳圖片實現即時刷新,可是一直實現不了,唉。
後來用了iframe框架來實現了,不過這個用這框架卻存在一個問題,當我吧圖片上傳以後我要把上傳的路徑返回到這框架中,那麼怎麼取出來,開始我把值直接輸出到iframe中,但是我去取出路徑的時候一直沒反應,一直在網上查看資料,但是各種版本就是沒有一個全面的講解怎麼使用iframe上傳圖片然後實現實時刷新的功能,只能自己研究了。大多數都是說怎麼上傳就可以了,這個我也會,都斷在這還真讓人難受,只能自己研究了
既然iframe中上傳成功後輸出值到頁面中,無法取出來,試了N中方法,查了N多資料,還真是讓人頭痛。
後來在iframe中加個src,再在圖片上傳成功後輸出值寫成一條簡單的javascript語句輸出就OK了,嘿嘿。總結一下:
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为上传图片的地址
這樣就能輕鬆實現圖片上傳無刷新頁面,且圖片實現即使刷新了