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 相关文章推荐
简单易用的计数器(数据库)
Oct 09 PHP
PHP个人网站架设连环讲(三)
Oct 09 PHP
从php核心代码分析require和include的区别
Jan 02 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
Jun 14 PHP
php实现在限定区域里自动调整字体大小的类实例
Apr 02 PHP
编写PHP脚本过滤用户上传的图片
Jul 03 PHP
PHP定时任务获取微信access_token的方法
Oct 10 PHP
PHP正则表达式匹配替换与分割功能实例浅析
Feb 04 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
Jun 12 PHP
PHP7扩展开发之hello word实现方法详解
Jan 15 PHP
PDO::beginTransaction讲解
Jan 27 PHP
PHP策略模式写法
Apr 01 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初学者(入门学习经验谈)
2010/10/12 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP中Array相关函数简介
2016/07/03 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python读写文件方法总结
2015/06/09 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
简单了解python PEP的一些知识
2019/07/13 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
公积金单位接收函
2014/01/11 职场文书
趣味游戏活动方案
2014/02/07 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
小学大队委竞选口号
2015/12/25 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
vue特效之翻牌动画
2022/04/20 Vue.js
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS