使用iframe伪装异步上传文件

最新推荐文章于 2020-04-11 14:22:08 发布

aozeahj

最新推荐文章于 2020-04-11 14:22:08 发布

阅读量3.1k

点赞数

分类专栏： ajax技术

本文链接：https://blog.csdn.net/aozeahj/article/details/53008300

版权

ajax技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用iframe伪装异步上传文件

在不支持html5的前提下，ajax技术是无法实现文件的异步上传，原因很简单，ajax本质上还是js写的，而js是不能操作浏览器端的主机，不能操作硬盘上的文件。所以无法上传文件。但是我们可以通过iframe内联框架，来伪装实现无页面的跳转的异步上传。

使用iframe伪异步上传的原理很简单，我们知道在提交表单后，必然会跳转页面，但是如果我们在上传文件的页面内联一个框架作为表单提交后的页面，不就好像没有跳转页面了吗？同时我们可以把这个内联框架隐藏起来，就更加像是异步上传了。

说到这你可能会说，那服务器回传的上传文件情况的提示信息怎么办呢？没有关系，我们可以在后台写js字符串输入前台，控制页面显示，上传的提示信息。

所以思路如下；

1.在页面文件，写好上传文件的表单和iframe框架

2.在后台文件。写好保存文件并且写js代码字符串，来控制前台的信息显示。

前台文件upload.html的全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
    <title>iframe伪异步上传文件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script type="text/javascript">
    </script>
</head>
<body>
     <h2 id='info'></h2>
     <form action='./move_file.php' method='POST' target='iframe' enctype='multipart/form-data'><!-- 通过tartget设置表单提交后跳转的地方-->
	 <input type='file' name='pic' />
	 <input type='submit' value='提交'/>
	 </form>
	<iframe name='iframe' width='0px' height='0px' frameborder='0'></iframe><!-- 将iframe的高宽，边框都设置为0，相当于隐藏了-->
</body>

后台文件 move_file.php

<?php
if(empty($_FILES))
{
  $text='上传为空文件';
  die(returnText($text));  
}
if($_FILES['pic']['error']!=0)
{
 $text='文件上传出错';
 die(returnText($text));	
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$_FILES['pic']['name']);
$text='文件上传成功！';
echo returnText($text);

//通过returnText函数，将上传提示信息，加入js代码字符串中。
function returnText($text)
{
 return "<script>parent.document.getElementById('info').innerHTML='$text';</script>";
 /*因为表单设定，跳转页面是iframe，所以写js首先，要通过iframe的dom对象parent，获得upload.html主页面
   dom对象，才能通过document.getElementById('info')获取页面上的<h2 id='info'></h2> dom对象，从而显示提示信息。
 */
}
?>

页面显示如图：

这种虽然在视觉上实现了类似异步上传，无页面刷新的效果但是，还不是真正的异步上传文件，值得庆幸的是，在html5中已经支持了ajax的异步上传，并且现在的浏览器大多数已经支持了。在下一文章中我将介绍用ajax技术实现文件异步上传。

aozeahj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用iframe伪装异步上传文件

使用iframe伪装异步上传文件在不支持html5的前提下，ajax技术是无法实现文件的异步上传，原因很简单，ajax本质上还是js写的，而js是不能操作浏览器端的主机，不能操作硬盘上的文件。所以无法上传文件。但是我们可以通过iframe内联框架，来伪装实现无页面的跳转的异步上传。使用iframe伪异步上传的原理很简单，我们知道在提交表单后，必然会跳转页面，但是
复制链接

扫一扫