用iFrame 无页面刷新上传文件原理 Ajax 文件上传
先申明：用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
<?php echo 'Great';
点击‘OK'后，将得到提示:Great
事情就这样简单。
当然 ，以上代码还很简单，完整的功能还应当包括：
1. 封装成一个函数（类）
2. 服务器返回的错误检测
3. 返回内容的检测 ，比如：如果是 XML ，给出XML
4.. 提交额外的字段
相关推荐
ajaxtony 2020-02-03
kentrl 2016-05-03
架构技术交流 2020-07-28
haohong 2020-07-18
tiankele0 2020-06-26
xiangxiaojun 2020-06-25
pythonclass 2020-06-04
WebVincent 2020-06-03
sixthelement 2020-05-30
云之高水之远 2020-05-19
云之高水之远 2020-05-17
Chydar 2020-05-15
tuxlcsdn 2020-04-17
STPace 2020-02-03
学留痕 2013-05-11
云之高水之远 2020-01-05
TONIYH 2019-12-20
nimeijian 2019-12-15
我只是个程序员 2014-01-18