iframe仿Ajax上传文件

独自空忆成欢 提交于 2020-03-12 11:45:04

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

?>

 页面效果

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!