PHP+iframe图片上传实现即时刷新效果

 更新时间:2016年11月18日 10:06:50   投稿:jingxian  
下面小编就为大家带来一篇PHP+iframe图片上传实现即时刷新效果。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这几天在做一个图片上传功能,原本想用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设计模式之迭代器模式,结合星际争霸游戏案例形式分析了PHP迭代器模式相关原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • php微信授权登录实例讲解

    php微信授权登录实例讲解

    这篇文章主要介绍了php微信授权登录实例讲解,微信授权登录是比较常用的功能,有需要的同学可以研究下
    2021-03-03
  • php目录操作实例代码

    php目录操作实例代码

    这篇文章主要介绍了php目录操作实例代码,需要的朋友可以参考下
    2014-02-02
  • Yii不依赖Model的表单生成器用法实例

    Yii不依赖Model的表单生成器用法实例

    这篇文章主要介绍了Yii不依赖Model的表单生成器用法,以实例形式对比分析了不依赖Model的表单生成器实现方法,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • XAMPP安装与使用方法详细解析

    XAMPP安装与使用方法详细解析

    这篇文章主要是对XAMPP安装与使用方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • codeigniter集成ucenter1.6双向通信的解决办法

    codeigniter集成ucenter1.6双向通信的解决办法

    用codeigniter开发一个子网站,之后想和原来的论坛进行同步,包括同步登陆和双向通信。这篇文章主要介绍了codeigniter集成ucenter1.6双向通信的解决办法,需要的朋友可以参考下
    2014-06-06
  • YII2框架使用控制台命令的方法分析

    YII2框架使用控制台命令的方法分析

    这篇文章主要介绍了YII2框架使用控制台命令的方法,结合实例形式分析了YII2使用控制台命令的相关步骤、原理与操作技巧,需要的朋友可以参考下
    2020-03-03
  • php使浏览器直接下载pdf文件的方法

    php使浏览器直接下载pdf文件的方法

    本文介绍如何让用户打开pdf文件时不是直接在浏览器浏览而是直接以下载文件形式把pdf文件下载到电脑
    2013-11-11
  • Laravel中的Auth模块详解

    Laravel中的Auth模块详解

    最近在工作中遇到了Auth模块,但是对Auth模块一知半解,通过查找相关的资料了解学习,所以下面这篇文章主要给大家介绍了关于Laravel中Auth模块的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • php数组删除元素示例

    php数组删除元素示例

    在某个数组中删除一个元素,我是直接用的unset,也不管unset之后会发生什么。但今天看到的东西却让我大吃一惊,并不是我想象的那样,我用示例来说明
    2014-03-03

最新评论