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

刺骨的言语ヽ痛彻心扉 2022-08-10 11:51 207阅读 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>';
    
    
    ?>

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax上传文件

一般的时候都是用的struts提交表单进行文件上传我做了一个校验，想用ajax进行文件的验证，这时候就需要使用ajax上传文件进行验证首先需要一个js包

ゝ一世哀愁。/ 2022年09月18日 06:58/ 0 赞/ 261 阅读

相关模拟ajax无刷新上传文件

转自：http://www.iteye.com/topic/81120 首先要说的就是 ajax 是无法实现上传文件的，可以想一下ajax与后台通信都是通过传递字符串，怎么

淩亂°似流年/ 2022年08月11日 07:30/ 0 赞/ 182 阅读

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

我们知道，js及ajax是无法操作文件的，当然，现在新出的xhr2标准已经包含文件上传API，但是，毕竟是新标准，那些老旧的浏览器，依然不支持，我们不能强制要求

刺骨的言语ヽ痛彻心扉/ 2022年08月10日 11:51/ 0 赞/ 208 阅读

相关 php无刷新上传图片

1. 引入文件  <script type="text/javascript" src="/js/jquery.form.j

喜欢ヅ旅行/ 2022年08月09日 00:58/ 0 赞/ 266 阅读

相关仿ajax文件上传预览

【html】 <from method="post" action="t1.php"> 图片：<input type="file" name="pic" id

妖狐艹你老母/ 2022年08月07日 05:58/ 0 赞/ 245 阅读

相关无刷新上传文件

关于不刷新页面提交表单数据，以前只知道使用ajax的方法，昨天用ajax实现这个功能时，遇到一个问题，表单中有文件域，ajax的方式不能上传文件，除非用js传输文件流。（这是我

梦里梦外;/ 2022年06月16日 13:44/ 0 赞/ 248 阅读

相关【转载】文件上传那些事儿，文件ajax无刷上传

文件上传那些事儿，文件ajax无刷上传 > 最近做了一个vue的文件上传组件，整准备整理一下，微博上看到这篇文章，讲得非常详细，就转载过来了。导语　　正好新人

落日映苍穹つ/ 2022年06月16日 06:36/ 0 赞/ 183 阅读

相关 Ajax+PHP异步上传头像案例

效果截图： ![20180308115351997][] 上传页面 <!DOCTYPE html> <html lang="en">

逃离我推掉我的手/ 2022年05月30日 08:14/ 0 赞/ 155 阅读

相关 ajax无刷新上传文件

详细的解释都在注释里面了，注意一点XMLHttpRequest : 增加很多功能，他不推荐使用onreadystatechange这个事件来监听，推荐使用onload 所以我

落日映苍穹つ/ 2022年05月28日 09:16/ 0 赞/ 226 阅读

相关实现头像,文件上传

该文章来源于 [https://www.cnblogs.com/libo0125ok/p/7773898.html][https_www.cnblogs.com_libo0

电玩女神/ 2022年05月22日 13:09/ 0 赞/ 429 阅读