PHP+iFrame实现页面无需刷新的异步文件上传
|
《PHP实例：PHP+iFrame实现页面无需刷新的异步文件上传》要点： 本篇章节讲解PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧.分享给大家供大家参考.具体分析如下：PHP编程 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了.PHP编程 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多.PHP编程 先来给初学者补补基础知识：PHP编程 1. 在iframe标签一般会指定其name特性以于标识； 本文实现的是一个用户选择了头像文件后立刻上传并显示在页面上的例子,废话不多说,思路是这样的：PHP编程 1. 在表单中嵌入一个iframe,设定好name特性值； 下面是效果截图和实现的代码：PHP编程
upload.php页面如下: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编程
<?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编程 《PHP实例：PHP+iFrame实现页面无需刷新的异步文件上传》是否对您有启发，欢迎查看更多与《PHP实例：PHP+iFrame实现页面无需刷新的异步文件上传》相关教程，学精学透。编程之家 52php.cn为您提供精彩教程。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
