您的位置：首页 > 其它

iframe仿Ajax上传文件

2015-10-17 21:00 197 查看

利用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>";

?>

页面效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航