iframe仿Ajax上传文件
利用iframe框架完成文件上传
前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe伪装上传文件</title>
<script type="text/javascript" src="./jquery-2.0.0.min.js"></script>
<script type="text/javascript">
function up(){
var fname='up'+Math.random();//产生随机name值
$('<iframe name="'+fname+'" width="0" height="0" frameBorder="0"></iframe>').appendTo($('body'));//创建iframe标签，
$('form:first').attr('target',fname);//将php返回信息引到这个框架中来，不发生页面跳转
$('#xinxi').html('正在上传');//上传过程中的显示
//return false;
}
</script>
</head>
<body>
<h1>iframe模拟Ajax文件上传</h1>
<h2 id="xinxi"></h2>
<form action="01.php" method="post" onsubmit="return up();" enctype="multipart/form-data">
<p><input type="file" name="pic" /></p>
<p><input type="submit" value="上传"/></p>
</form>
</body>
</html>
01.php
<?php
if(empty($_FILES)){
echo 'no file';
}
sleep(2);
$error=$_FILES['pic']['error']==0?'succ':'fail';
echo "<script>parent.document.getElementById('xinxi').innerHTML='$error'</script>";
?>
页面效果
