ajax--iframe模拟ajax文件上传效果

最新推荐文章于 2021-08-06 21:14:22 发布

sonia_gintoki

最新推荐文章于 2021-08-06 21:14:22 发布

阅读量623

点赞数

分类专栏： ajax 文章标签： javascript php ajax

本文链接：https://blog.csdn.net/sonia_gintoki/article/details/50586687

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js无权读取本地的文件，so不能上传文件但是
有这几种方法

1 iframe伪装 jquery-uploaded-file
2 swf插件 (这个不讲，是一个单独的软件
3 html5

iframe模拟ajax文件上传效果
1捕捉表单提交动作
2创建iframe
3target修改指向 iframe
4去掉iframe

<h1></h1>
<!-- enctype 属性可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在发送表单数据之前如何对其进行编码。

target
规定在何处打开 action URL。（这边是iframe里） 
onsubmit 点击运行js的方法通过才到｀action

文件上传说没上传  enctype没写-->
	<form action="7iframe.php" method="post" οnsubmit="upfile()" enctype="multipart/form-data">
		<input type="file" name="pic">
		<input type="submit" value="提交" >
	</form>

js部分（用了jquery）创建iframe

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	
	<script type="text/javascript">
	function upfile(){
		// 创建iframe 和属性name
		var ifname = 'up'+Math.random();
		$('<iframe name="' + ifname +'"></iframe>').appendTo($('body'));
		// form表单加入target属性，form点击在iframe打开
		$('form:first').attr('target',ifname);

	}


	</script>

php部分 error为0就代表文件上传成功在之前写的h1标签里出现信息

<?php
if(empty($_FILES)){
	exit('no file');
}

$error = $_FILES['pic']['error'] == 0 ? '上传成功':'上传失败';
echo "<script> parent.document.getElementsByTagName('h1')[0].innerHTML = '$error'</script>";

?>