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开源建站平台小结
Apr 22 PHP
php设计模式 Composite (组合模式)
Jun 26 PHP
PHP 字符串正则替换函数preg_replace使用说明
Jul 15 PHP
应用开发中涉及到的css和php笔记分享
Aug 02 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
Aug 16 PHP
ThinkPHP中处理表单中的注意事项
Nov 22 PHP
php 在字符串指定位置插入新字符的简单实现
Jun 28 PHP
PHP与服务器文件系统的简单交互
Oct 21 PHP
PHP实现可精确验证身份证号码的工具类示例
May 31 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
Apr 30 PHP
使用Laravel中的查询构造器实现增删改查功能
Sep 03 PHP
PHP学习记录之常用的魔术常量详解
Dec 12 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
js+css实现打字效果
2020/06/24 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python梯度下降算法的实现
2020/02/24 Python
技术总监岗位职责
2013/12/05 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
医院病假条范文
2015/08/17 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python