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

这几天在做一个图片上传功能,原本想用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图片上传实现即时刷新效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索刷新
iframe图片上传
iframe无刷新上传图片、iframe无刷新上传、iframe无刷新上传文件、iframe 刷新、iframe刷新父页面,以便于您获取更多的相关知识。

时间: 2024-08-04 03:44:21

PHP+iframe图片上传实现即时刷新效果_php实例的相关文章

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

这几天在做一个图片上传功能,原本想用ajax上传图片实现即时刷新,可是一直实现不了,唉. 后来用了iframe框架来实现了,不过这个用这框架却存在一个问题,当我吧图片上传以后我要把上传的路径返回到这框架中,那么怎么取出来,开始我把值直接输出到iframe中,但是我去取出路径的时候一直没反应,一直在网上查看资料,但是各种版本就是没有一个全面的讲解怎么使用iframe上传图片然后实现实时刷新的功能,只能自己研究了.大多数都是说怎么上传就可以了,这个我也会,都断在这还真让人难受,只能自己研究了 既然i

yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法_php实例

我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

thinkphp jquery实现图片上传和预览效果_php技巧

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

关于UEditor编辑器远程图片上传失败的解决办法_php实例

远程图片上传是个很有意思的东西,比如你从别的网站复制一段文件,如果文字中带有图片,编辑器会自动将图片提取出来,进行上传,从而不用担心远程图片失效后,自己本地也无法浏览. 通过检查,发现远程图片上传的操作页面是:getRemoteImage.php .打开后我们先配置 savePath ,因为不同用户使用,需要存放到不同的目录,以免混乱,也方便管理 修改后代码: 复制代码 代码如下: //远程抓取图片配置 if(isset($_SESSION['admin'])){ $myPath = 'http

asp.net文件图片上传带预览效果

asp教程.net文件图片上传带预览效果 图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像. 程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素. 程序有以下几种预览方式: simple模式:直接从file的value获取图片路径来显示预览,适用于ie6: filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8: domfile模式:调用file的getAsDataURL

Asp.net图片上传实现预览效果的简单代码

这篇文章介绍了Asp.net图片上传实现预览效果的简单代码,有需要的朋友可以参考一下   在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下:  <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>         <asp:Image ID="Image1" runat="

Javascript图片上传前的本地预览实例_javascript技巧

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

jQuery+HTML5实现图片上传前预览效果_jquery

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

仿dedecms 图片上传站内选择效果

仿dedecms 图片上传站内选择效果 这是用js点击弹出窗口再parent调用打开新窗口值返回要父窗口代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu