巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

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法式设想的进修有必然的鉴戒代价。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

11
01月
手机网站设想时该注重甚么 - 前沿网站设想_

172016/08 手机网站设想时该注重甚么 此刻咱们的糊口已离不开手机了!跟着愈来愈多的人把时候都倾泻在手机上... >>概况

24
01月
企业网站终究指向工具是谁呢?

咱们在做网站扶植时总会碰到一些客户,常常不清晰网站究竟是要向谁展现。实在这个题目一向领司理人及老板感应很纠结,缘由很简略,又想在老客户眼前树... >>概况

26
04月
php静态读取数据断根最右侧距的体例

需要结果一行3栏:场景摹拟:共事给了我这么一段静态代码以下:<!DOCTYPE html><html lang="en"&... >>概况

17
04月
(全进程)若何建造服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net网站,若何收费建造服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net

(全进程)若何建造服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net网站,若何收费建造服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net,建造服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net教程 服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net是供给用户交互交换的平台。良多信息宣布者都喜好挑选服装服装服装服装服装服装服装服装服装服装服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net来宣布信息,这也是网... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站