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 相关文章推荐
一个用php3编写的简单计数器
Oct 09 PHP
一个数据采集类
Feb 14 PHP
在php MYSQL中插入当前时间
Apr 06 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
Oct 11 PHP
php中存储用户ID和密码到mysql数据库的方法
Feb 06 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
Jun 20 PHP
thinkphp控制器调度使用示例
Feb 24 PHP
ThinkPHP自动填充实现无限级分类的方法
Aug 22 PHP
初识Laravel
Oct 30 PHP
PHP操作文件的一些基本函数使用示例
Nov 18 PHP
PHP实现获取url地址中顶级域名的方法示例
Jun 05 PHP
php7 参数、整形及字符串处理机制修改实例分析
May 25 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
数据库的日期格式转换
2006/10/09 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
户外活动策划方案
2014/03/12 职场文书
总经理助理的职责
2014/03/14 职场文书
2014小学年度工作总结
2014/12/20 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
读书笔记格式
2015/07/02 职场文书