PHP+iFrame实现页面无需刷新的异步文件上传
本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传，是非常实用的常见技巧。分享给大家供大家参考。具体分析如下：
说到iframe，现在用它的人是越来越少了，并且很多人都相信它应该被AJAX所取代，的确如此，因为AJAX太出色了。
不过有一种情况的实现我还是选择了iframe，这就是本文要说的文件的异步上传，感兴趣的可以试试，如果用原生的AJAX来实现应该是要复杂的多。
先来给初学者补补基础知识：
1. 在iframe标签一般会指定其name特性以于标识；
2. 在form表单中通过action(目标地址)和target(目标窗口，默认为_self)来确定提交的目的地；
3. 将form中的target指向iframe的name，则可将表单提交到了隐藏框架iframe中；
4. iframe里的内容实际上也是一个页面，其中的js里的parent对象指代父页面，即嵌入iframe的页面；
5. PHP中用move_uploaded_file()函数来实现文件上传，$_FILES数组存储有上传文件的相关信息。
本文实现的是一个用户选择了头像文件后立刻上传并显示在页面上的例子，废话不多说，思路是这样的：
1. 在表单中嵌入一个iframe，设定好name特性值；
2. 在选择文件上传的控件的值改变时触发一个js函数，该函数将表单提交至iframe，而iframe内嵌的页面用来处理文件上传；
3. 在iframe中完成了文件上传之后，在js中通过parent来操作父页面，在特定的标签内显示图片，并将图片的保存地址赋给一个隐藏域；
4. 回到原来的页面，现在既完成了文件的上传，也在隐藏域内记录了文件的路径，整个过程没有刷新页面；
5. 最后用户只需提交原来的页面时重置表单的action和target属性的值即可。
下面是效果截图和实现的代码：
upload.php页面如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iFrame异步文件上传</title>
</head>
<body>
<h1>iFrame异步文件上传</h1>
<form method="post" enctype="multipart/form-data">
用户名: <input type="text" name="username" /><br />
上传头像: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" />
<iframe style="display:none" mce_style="display:none" name="uploadframe"></iframe>
<input type="hidden" id="photo" name="photo" value="" />
<div id="displayphoto"></div>
<input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" />
</form>
<?php
//页面提交后显示相关信息
if (isset($_POST['submitted'])) {
$html = '<hr /><p>上传成功！</p>';
$html .= '<p>用户名：'.htmlspecialchars($_POST['username']).'</p>';
$html .= '<p>头像地址：'.htmlspecialchars($_POST['photo']).'</p>';
$html .= '<div><img src="'.htmlspecialchars($_POST['photo']).'" mce_src="'.htmlspecialchars($_POST['photo']).'" /></div><hr />';
echo $html;
}
?>
</body>
</html>
<mce:script type="text/javascript"><!--
//选择了文件后开始异步上传
function startUpload(oForm) {
document.getElementById('displayphoto').innerHTML = 'Loading...';
oForm.action = 'proceedupload.php';
oForm.target = 'uploadframe';
oForm.submit();
}
//整个页面的提交
function formSubmit(oForm) {
oForm.action = document.URL;
oForm.target = '_self';
oForm.submit();
}
// --></mce:script>
proceedupload.php页面如下:
<?php
//这里仅以特定图片格式举例，本应动态获取
$url = 'upload/img' . time() . '.jpg';
if (move_uploaded_file($_FILES['uploadphoto']['tmp_name'], $url)) {
//删除之前的图片
$_POST['photo'] !== '' && unlink($_POST['photo']);
?>
<html>
<head>
<body onLoad="doneLoading(parent, '<?=$url?>')">
</body>
</html>
<mce:script type="text/javascript"><!--
//在页面上显示刚刚上传成功的图像
function doneLoading(theFrame, url) {
var oDiv = theFrame.document.getElementById('displayphoto');
oDiv.innerHTML = '<img src="' + url + '" mce_src="' + url + '" alt="上传头像" />';
theFrame.document.getElementById('photo').value = url;
}
// --></mce:script>
<?php
}
?>
感兴趣的朋友可以测试运行一下本文实例，相信本文所述对大家PHP程序设计的学习有一定的借鉴价值。
相关文章
这篇文章主要介绍了PHP的伪随机数与真随机数详解,本文首先讲解了真随机数和伪随机数的相关概念,并给出了比用mt_rand()函数产生更好的伪随机数的一段例子代码,需要的朋友可以参考下2015-05-05
2个已经排序好的数组交集，学习php的朋友可以参考下。2011-05-05
在本文将数组的各种创建方式用PHP实例代码的方式分享给大家，感兴趣的朋友可以了解下2014-01-01
这篇文章主要介绍了PHP封装的数据库保存session功能类,涉及php基于SessionHandlerInterface接口实现的读取、写入、保存、销毁等常用操作方法,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了PHP实现ftp上传文件的方法,是非常实用的技巧,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了PHP7.1新功能之Nullable Type用法,结合实例形式较为详细的对比分析了Nullable Type类型操作的使用技巧,需要的朋友可以参考下2016-09-09
用PHP过滤html里可能被利用来引入外部危险内容的代码。有些时候，需要让用户提交html内容，以便丰富用户发布的信息，当然，有些可能造成显示页面布局混乱的代码也在过滤范围内。2009-06-06
php使用pdo连接报错Connection failed SQLSTATE的解决方法
这篇文章主要介绍了php使用pdo连接报错Connection failed SQLSTATE的解决方法,涉及针对配置文件的修改,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
在PHP+MySQL架构的站点中，本文重点从MySQL的角度去分析如何使Discuz!论坛（或者类似的PHP+MySQL架构的程序）应对大访问量。同时给出一些使用Memcache去减轻MySQL压力的建议2010-05-05
本文将详细介绍下php获取本地图片文件并生成xml文件输出，代码简单实用，感兴趣的朋友可以参考下哈，希望对你学习php有所帮助2013-04-04
最新评论