PHP+iframe图片上传实现即时刷新效果


Posted in PHP onNovember 18, 2016

这几天在做一个图片上传功能,原本想用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为上传图片的地址

这样就能轻松实现图片上传无刷新页面,且图片实现即使刷新了

以上这篇PHP+iframe图片上传实现即时刷新效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
用mysql触发器自动更新memcache的实现代码
Oct 11 PHP
php下载文件的代码示例
Jun 29 PHP
ThinkPHP模板自定义标签使用方法
Jun 26 PHP
php通过Chianz.com获取IP地址与地区的方法
Jan 14 PHP
Laravel框架中实现使用阿里云ACE缓存服务
Feb 10 PHP
yii2.0实现验证用户名与邮箱功能
Dec 22 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
Mar 01 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
Mar 21 PHP
深入理解PHP中的empty和isset函数
May 26 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
Jun 13 PHP
php微信开发之图片回复功能
Jun 14 PHP
50个优秀经典PHP算法大集合 附源码
Aug 26 PHP
PHP批量获取网页中所有固定种子链接的方法
Nov 18 #PHP
PHP实现二维数组按某列进行排序的方法
Nov 18 #PHP
PHP二维数组去重实例分析
Nov 18 #PHP
浅谈php fopen下载远程文件的函数
Nov 18 #PHP
PHP实现的自定义数组排序函数与排序类示例
Nov 18 #PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
Nov 18 #PHP
PHP屏蔽关键字实现方法
Nov 17 #PHP
You might like
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
js获取多个tagname的节点数组
2013/09/22 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
vue使用vue-cli快速创建工程
2017/07/28 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
vue开发移动端底部导航条功能
2020/04/08 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
python计算一个序列的平均值的方法
2015/07/11 Python
django+mysql的使用示例
2018/11/23 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
历史学专业毕业生求职信
2013/09/27 职场文书
演讲稿开场白
2014/01/13 职场文书
会务接待方案
2014/02/27 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书