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 相关文章推荐
php图片验证码代码
Mar 27 PHP
php中拷贝构造函数、赋值运算符重载
Jul 25 PHP
PHP根据IP判断地区名信息的示例代码
Mar 03 PHP
PHP调用JAVA的WebService简单实例
Mar 11 PHP
PHP判断数据库中的记录是否存在的方法
Nov 14 PHP
php+ajax实现文章自动保存的方法
Dec 30 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
Mar 08 PHP
apache php mysql开发环境安装教程
Jul 28 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
Mar 15 PHP
浅谈PHP错误类型及屏蔽方法
May 27 PHP
visual studio code 调试php方法(图文详解)
Sep 15 PHP
七种PHP开发环境搭建工具
Jun 28 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中日期加减法运算实现代码
2011/12/08 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
jQuery 表格工具集
2010/04/25 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
python连接池实现示例程序
2013/11/26 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
说一说Python logging
2016/04/15 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
消防安全汇报材料
2014/02/08 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
文明社区申报材料
2014/08/21 职场文书
公司感谢信范文
2015/01/22 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
python基础详解之if循环语句
2021/04/24 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL