跨域上传并返回结果
首先是一个正常的上传页面 upload.html<form method="post" target="if" enctype="multipart/form-data" action="http://www.ceshi.com/upapi.php?cb=http://shiyan.yonglan.net/shangchuan/tmp.html">
<input type="file" name="file" />
<input type="SUBMIT" value="upload" />
</form>
<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
<script>
// 这个函数将来会被iframe用到
function getIframeVal(val)
{
if(val){
alert(val);
}
}
</script>
这里有一个关键点是form的target要指向iframe,同时把iframe隐藏起来,这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url,因为我们的目标是iframe,所以只会把跳转的页面输出到iframe,而不会让当前页面跳转。
还有一点,callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。
再来看看form的action php内容
<?php
move_uploaded_file($_FILES['file']['tmp_name'],'upload/' . $_FILES['file']['name']); //存储上传的文件
// print_r($_FILES);
$data = $_FILES['file']['name'];
header('location:'.$_GET['cb'].'?file_id='.$data);
?>
这里可以处理文件,然后入库。操作完成后,把文件的id及其他信息都放在url里,最后跳转到这个url。(示例并未做任何数据验证)
最后来看看tmp.html,也就是刚刚deal.php跳转到的url,这个文件的内容会填充到页面的iframe里。
<script type="text/javascript">
var rs = window.location.search.split('?').slice(1);
window.parent.getIframeVal(rs.toString().split('=').slice(1));
</script>
页:
[1]