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 相关文章推荐
MySQL中create table语句的基本语法是
Jan 15 PHP
10条PHP编程习惯助你找工作
Sep 29 PHP
新手学习PHP的一些基础知识分享
Jul 27 PHP
php中经典方法实现判断多维数组是否为空
Oct 23 PHP
在PHP上显示JFreechart画的统计图方法
Nov 03 PHP
PHP开发框架kohana中处理ajax请求的例子
Jul 14 PHP
php在linux下检测mysql同步状态的方法
Jan 15 PHP
两种php实现图片上传的方法
Jan 22 PHP
PHP仿微信多图片预览上传实例代码
Sep 13 PHP
使用PHPStorm+XDebug搭建单步调试环境
Nov 19 PHP
php处理多图上传压缩代码功能
Jun 13 PHP
PHP session垃圾回收机制实例分析
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递归法读取目录及文件的方法
2015/01/30 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS