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 相关文章推荐
建立动态的WML站点(二)
Oct 09 PHP
PHP 的几个配置文件函数
Dec 21 PHP
php xml-rpc远程调用
Dec 19 PHP
php获取mysql数据库中的所有表名的代码
Apr 23 PHP
PHP字符串中特殊符号的过滤方法介绍
Feb 18 PHP
Thinkphp微信公众号支付接口
Aug 04 PHP
Zend Framework入门教程之Zend_View组件用法示例
Dec 09 PHP
利用PHP判断文件是否为图片的方法总结
Jan 06 PHP
PHP完全二叉树定义与实现方法示例
Oct 09 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
Feb 20 PHP
thinkphp3.2同时连接两个数据库的简单方法
Aug 13 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
Oct 11 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/01/27 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP图片加水印实现方法
2016/05/06 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
写演讲稿要注意的六件事
2014/01/14 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers