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 相关文章推荐
特详细的PHPMYADMIN简明安装教程
Aug 01 PHP
PHP程序61条面向对象分析设计的经验小结
Nov 12 PHP
php数组的概述及分类与声明代码演示
Feb 26 PHP
关于php支持分块与断点续传文件下载功能代码
May 09 PHP
PHP7.0安装笔记整理
Aug 28 PHP
浅谈PHP链表数据结构(单链表)
Jun 08 PHP
ThinkPHP中session函数详解
Sep 14 PHP
基于PHPexecl类生成复杂的报表表头示例
Oct 14 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
Jun 07 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
Aug 04 PHP
PHP实现合并两个排序链表的方法
Jan 19 PHP
redis+php实现微博(二)发布与关注功能详解
Sep 23 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
MyEclipse常用配置图文教程
2014/09/11 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php图片上传类 附调用方法
2016/05/15 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
初识Node.js
2015/03/20 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
Python制作爬虫抓取美女图
2016/01/20 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python3人脸识别的两种方法
2019/04/25 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
市场营销策划方案
2014/06/11 职场文书
六查六看心得体会
2014/10/14 职场文书
大二学年个人总结
2015/03/03 职场文书
Python中for后接else的语法使用
2021/05/18 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android