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下编码转换函数mb_convert_encoding与iconv的使用说明
Dec 16 PHP
php UTF-8、Unicode和BOM问题
May 18 PHP
PHP新手用的Insert和Update语句构造类
Mar 31 PHP
不使用php api函数实现数组的交换排序示例
Apr 13 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
Apr 29 PHP
Thinkphp调用Image类生成缩略图的方法
Mar 07 PHP
PHP中strpos、strstr和stripos、stristr函数分析
Jun 11 PHP
解决form中action属性后面?传递参数 获取不到的问题
Jul 21 PHP
弹出模态框modal的实现方法及实例
Sep 19 PHP
thinkphp5框架路由原理与用法详解
Feb 11 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
Apr 04 PHP
浅谈PHP7中的一些小技巧
May 29 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之第六天
2006/10/09 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
python概率计算器实例分析
2015/03/25 Python
Python 探针的实现原理
2016/04/23 Python
详解Python装饰器由浅入深
2016/12/09 Python
python实现杨氏矩阵查找
2019/03/02 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
公司财务自我评价分享
2013/12/17 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
亲子活动总结
2014/04/26 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
初中班干部工作总结
2015/08/10 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB