美工统筹SEO，为企业电子商务营销助力！
PHP+iFrame完成页面无需革新的异步文件上传
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-28 13:46:30 阅读数: 115
本文实例报告了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法式设想的进修有必然的鉴戒代价。
TAG标签： PHP+iFrame完成页面无需革新的异步文件上传
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历，供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版，拖拽排版网站建造设想，轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ，已胜利的为天下上百家收集公司供给自助建站平台搭建办事。
