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图片上传实现即时刷新效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • php+iframe实现隐藏无刷新上传文件

    首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 复制代码 代码如下: <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" nam

  • php利用iframe实现无刷新文件上传功能的代码

    复制代码 代码如下: <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/网页特效"> function startUpload() { document.getElementById('processing').in

  • PHP+iFrame实现页面无需刷新的异步文件上传

    PHP+iFrame实现页面无需刷新的异步文件上传

    本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧.分享给大家供大家参考.具体分析如下: 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了. 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多. 先来给初学者补补基础知识: 1. 在iframe标签一般会指定其name特性以于标识: 2. 在form表单中通过

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

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

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

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

    本文实例讲述了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

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • thinkphp jquery实现图片上传和预览效果

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

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

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

    在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下: <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>        <asp:Image ID="Image1" runat="server"  /> 在上传控件中写onpropertychange=&q

  • Android图片上传实现预览效果

    Android图片上传实现预览效果

    首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

  • Javascript图片上传前的本地预览实例

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

  • Django 实现图片上传和下载功能

    Django 实现图片上传和下载功能

    原生上传图片方式 #新建工程 python manage.py startapp test30 #修改 settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'stu'

  • PHP+Ajax无刷新带进度条图片上传示例

    PHP+Ajax无刷新带进度条图片上传示例

    项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图 本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

  • js实现图片上传即时显示效果

    js实现图片上传即时显示效果

    前言 h5实训时实现的一个图片上传即时显示的效果;如下图所示 正文 Html代码 <form action="" method="POST" role="form"> <div class="form-group"> <label for="touxiang" >头像上传:</label> <input type="file" id=

随机推荐