用iFrame 无页面刷新上传文件原理 Ajax 文件上传

最新推荐文章于 2021-08-06 18:59:13 发布

iteye_11287

最新推荐文章于 2021-08-06 18:59:13 发布

阅读量126

点赞数

分类专栏： JavaScript 文章标签： JavaScript 上传文件无刷新

本文链接：https://blog.csdn.net/iteye_11287/article/details/82609607

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先申明：用Ajax 是无法上传文件的。

不过，Ajax 主要的特性就是页面无刷新，所以这个特性可以用iFrame 来模拟。

基本原理是 Form 的 target 属性指向一个 iFrame。最基本的代码如下：

<html>
<head>
	<meta charset='UTF-8' />
	<script src="jquery-1.11.0.js" type="text/javascript"></script>
	<script >
		$(function(){
			//检查iFrame load 事件的返回内容
			$('#fr1').load(function(){
				var iw=this.contentWindow || this.contentDocument ;
				alert(iw.document.body.innerHTML);
			});
		})
	</script>
</head>
<body>
	<!-- 关键是target='hideFrameName'   -->
	<form id='form1' action='todo.php' method="POST" enctype="MULTIPART/FORM-DATA" target='hideFrameName' >
		<input type="text" name='name'/><br/>
		<input type='file' name='file1'/><br/>
		<input type='submit' >OK</button><br/>
	</form>
	<!-- 隐藏的iFrame   -->
	<iframe id='fr1' src="" name='hideFrameName' style='display:none'>
		
	</iframe>
</body>
</html>

服务端文件 todo.php