相思资源网 Design By www.200059.com

本文实例讲述了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属性的值即可。

下面是效果截图和实现的代码:

PHP+iFrame实现页面无需刷新的异步文件上传

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> 
<"'.htmlspecialchars($_POST['photo']).'" mce_src="/UploadFiles/2021-04-02/'.htmlspecialchars($_POST['photo']).'">

proceedupload.php页面如下:

<"doneLoading(parent, '<"> 
</body> 
</html> 
<mce:script type="text/javascript"><!-- 
//在页面上显示刚刚上传成功的图像 
function doneLoading(theFrame, url) { 
  var oDiv = theFrame.document.getElementById('displayphoto'); 
  oDiv.innerHTML = '<img src="/UploadFiles/2021-04-02/' + url + '">

感兴趣的朋友可以测试运行一下本文实例,相信本文所述对大家PHP程序设计的学习有一定的借鉴价值。

标签:
PHP,iFrame,页面,无需刷新,异步,文件上传

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“PHP+iFrame实现页面无需刷新的异步文件上传”

暂无PHP+iFrame实现页面无需刷新的异步文件上传的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。