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的配置文件php.ini
Oct 09 PHP
php下目前为目最全的CURL中文说明
Aug 01 PHP
php从右向左/从左向右截取字符串的实现方法
Nov 28 PHP
PHP中将网页导出为Word文档的代码
May 25 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
Nov 07 PHP
php像数组一样存取和修改字符串字符
Mar 21 PHP
CI框架学习笔记(二) -入口文件index.php
Oct 27 PHP
PHP获取音频文件的相关信息
Jun 22 PHP
Zend Framework实现将session存储在memcache中的方法
Mar 22 PHP
你不知道的文件上传漏洞php代码分析
Sep 29 PHP
PHP读取word文档的方法分析【基于COM组件】
Aug 01 PHP
PHP Pipeline 实现中间件的示例代码
Apr 26 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python实现用户管理系统
2018/01/10 Python
python 常用的基础函数
2018/07/10 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python 复平面绘图实例
2019/11/21 Python
基于python 凸包问题的解决
2020/04/16 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
国外软件测试工程师面试题
2016/12/09 面试题
求职意向书
2014/04/01 职场文书
信用卡工资证明范本
2014/10/17 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python