核心思想：通过Html的iframe标签属性操作顶级窗口，再用php动态无刷新上传图片文件。

示例如下：

demo

　　|------uploads #存放上传的文件

　　|------index.php

　　|------upload.php

　　|------jquery.js

index.php

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>index</title>

	<script src="jquery.js"></script>

</head>

<body>

	<h1>

	<?php

		echo "当前时间戳：".time();

	?>

	</h1>

	<form action="upload.php"  target='myform' method="post" enctype="multipart/form-data">

		<p>文件上传：</p>

		<p>

		<input type="file" name="img">

		</p>

	</form>

	<div>

	<img src="" alt="" id="imgid">

	</div>

	<iframe name ="myform" frameborder="1" src="" style="display:none"></iframe>

</body>

<script>

$(':file').change(function(){

	$('form').submit();

});

</script>

</html>

upload.php

<?php

	error_reporting(0);

	$src=$_FILES['img']['tmp_name'];

	$file=$_FILES['img']['name'];

	$ext=array_pop(explode('.', $file));

	$rand=time().mt_rand().'.'.$ext;

	//echo $rand;

	$rst="uploads/{$rand}";

	if ($_FILES['img']['error']===0) {

		if(move_uploaded_file($src, $rst)){

			echo "<script>top.document.getElementById('imgid').src='{$rst}'</script>";

		}

	}

 ?>

php无刷新上传图片和文件的更多相关文章

  1. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  2. 使用SWFUpload无刷新上传图片

    使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...

  3. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  4. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  5. TP3.2：实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  6. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  7. 无刷新上传图片，ajax 和 iframe

    iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  8. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  9. ajax无刷新上传图片

    页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

随机推荐

  1. Java 中的 Filter 过滤器详解

    Filter简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件 ...

  2. 利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题

    问题的描述: 一个项目,涉及到了 两个数据源,分别使用的是 两个不同的 数据库连接池,其中一个是 poxool 连接池,问题在于,spring在启动时,只初始化其中的一个 数据库连接池中的数据库连接, ...

  3. send+recv注意事项

    [TOC] send 函数原型 ssize_t send( SOCKET s, const char *buf, size_t len, int flags ) 注意事项 待发送数据长度data_le ...

  4. python对文件的操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法. 1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 2.返回指定目录下的所有文件 ...

  5. MMORPG大型游戏设计与开发（服务器 游戏场景 聊天管道和寻路器）

    又快到双十一,又是不少同仁们出血的日子,首先希望大家玩的开心.我曾经想要仔细的剖析场景的的每个组件,就像这里的聊天管道与寻路器,但是仔细阅读别人代码的时候才发现元件虽小但是实现并不简单,因为有些东西还 ...

  6. C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性

    本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...

  7. maven核心，pom.xml详解(转)

    什么是pom?    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...

  8. JSP转译成Servlet详细过程

    很多人都会认为JSP的执行性能会和Servlet相差很多,其实执行性能上的差别只在第一次的执行.因为JSP在执行第一次后,会被编译成 Servlet的类文件,即.class,当再重复调用执行时,就直接 ...

  9. Ubuntu14.0下安装Zend Framework 2

    Ubuntu14.0下安装Zend Framework 2为了安装这个东西,忙活了快一天了,参考中文博客一直没有安装成功,有些博客的时间也是已经很早了,后来google看英文版的才安装成功,这里记录一 ...

  10. AC日记——寻找道路 洛谷 P2296

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...