核心思想：通过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. 从零自学Hadoop(13)：Hadoop命令下

    阅读目录 序 MapReduce Commands User Commands Administration Commands YARN Commands User Commands Administ ...

  2. sublime text3的一些插件安装方法和使用

    sublime text部分插件使用方法在线安装package Control的方法:    ctrl+~ 输入如下代码:        import urllib2,os; pf='Package ...

  3. java反射 cglib asm相关资料

    有篇文章对java反射的调用的效率做了测试,写的比较好.猛击下面地址 http://www.blogjava.net/stone2083/archive/2010/09/15/332065.html ...

  4. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  5. WPF -Enum的三种绑定方法

    一.使用ObjectDataProvider <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentat ...

  6. 解决：PADS导入.DXF结构图出现坐标超出范围问题

    现象: 原因: PCB尺寸是有限的,PADS中对于坐标大小有所限制,但AUTO CAD中的坐标却是无限制的. 解决方法: 1.在AUTO中使用M命令,将绘制的结构图移动至原点: 2.在AUTO中使用W ...

  7. C++11 之 并发编程 (一)

    未来芯片制造,如果突破不了 5nm 极限,则 CPU 性能的提升,可能会依赖于三维集成技术,将多个 CPU 核集成在一起,使得多核系统越来越普遍. 以前的 C++ 多线程,一是受限于平台,多借助于封装 ...

  8. 【ASC 23】G. ACdream 1429 Rectangular Polygon --DP

    题意:有很多棍子,从棍子中选出两个棍子集合,使他们的和相等,求能取得的最多棍子数. 解法:容易看出有一个多阶段决策的过程,对于每个棍子,我们有 可以不选,或是选在第一个集合,或是选在第二个集合 这三种 ...

  9. 直线的参数方程ABC

    直线的参数方程的来源 如图所示, 直线\(l\)的倾斜角为\(\theta\),经过定点\(P_0(x_0,y_0)\),在直线上有一动点\(P(x,y)\),如果我们取直线的单位方向向量\(\vec ...

  10. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...