这期内容当中小编将会给大家带来有关怎么在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>
<h2>iFrame异步文件上传</h2>
<form method="post" enctype="multipart/form-data">
用户名: <input type="text" name="username" /><br />
上传头像: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" />
<iframe mce_ 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中利用iFrame实现一个异步文件上传功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
