仿ajax 无刷新上传文件(如头像上传等)

最新推荐文章于 2018-01-23 15:50:54 发布

栁罗风尘

最新推荐文章于 2018-01-23 15:50:54 发布

阅读量910

点赞数

分类专栏：相关技术/无刷新文件上传文章标签：文件上传无数新

本文链接：https://blog.csdn.net/wujiangwei567/article/details/41439437

版权

相关技术/无刷新文件上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们知道，js及ajax是无法操作文件的，当然，现在新出的xhr2标准已经包含文件上传API，但是，毕竟是新标准，那些老旧的浏览器，依然不支持，我们不能强制要求别人不用IE8这样的浏览器，所以还是需要有个兼容的办法。这就是这篇blog要提到的，无刷新上传。

原理：使用form表单的 target属性，我们把目标指向本页面的iframe，

然后，我们将iframe 用css隐藏，

接着，我们在后台操作文件程序，调用前台的js程序，将返回结果显示在当前页面上。

上代码：

前台html 部分：

<script type="text/javascript">
  function pic(url){
     var div3 = document.getElementById('div3');
	 div3.style.background ="url("+url+")";
  }
</script>
<style type="text/css">
  .div2{width:0;height:0}
  #div3{width:100px;height:100px;}
  iframe{width:0;height:0;}
</style>

</head>
 <body>
    <div class="div1">
	    <form method="post" enctype="multipart/form-data" target="head_userpic" action="upload.php">
		   <input type="file" name="pic" />
		   <input type="submit" value="上传"/>
		</form>
	</div>
	<div class="div2">
	  <iframe frameborder=0 name="head_userpic"></iframe>
	</div>
	<div id="div3"></div>
 </body>
</html>

后台php部分

<?php
header("content-type:text/html;charset=utf8");

$dir = $_FILES["pic"]["tmp_name"];
$name = $_FILES["pic"]["name"];
move_uploaded_file($dir,'./'.$name);

echo '<script>parent.pic("'.'./'.$name.'");</script>';


?>