怎么在PHP中利用iFrame实现一个异步文件上传功能 - 行业资讯

　　介绍

这期内容当中小编将会给大家带来有关怎么在PHP中利用iFrame实现一个异步文件上传功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

具体分析如下:

说到iFrame,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了。

不过有一种情况的实现我还是选择了iFrame,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多。

先来给初学者补补基础知识:

1。在iframe标签一般会指定其名字特性以于标识;
2。在形式表单中通过行动(目标地址)和目标(目标窗口,默认为_self)来确定提交的目的地;
3。将表格中的目标指向iframe的名字,则可将表单提交到了隐藏框架iframe中;
4。内嵌框架里的内容实际上也是一个页面,其中的js里的父母对象指代父页面,即嵌入iframe的页面;
5。PHP中用函数()函数来实现文件上传,带有_file美元数组存储有上传文件的相关信息。

本文实现的是一个用户选择了头像文件后立刻上传并显示在页面上的例子,废话不多说,思路是这样的:

1。在表单中嵌入一个iframe,设定好名字特性值;
2。在选择文件上传的控件的值改变时触发一个js函数,该函数将表单提交至iframe,而iframe内嵌的页面用来处理文件上传;
3。在iframe中完成了文件上传之后,在js中通过父母来操作父页面,在特定的标签内显示图片,并将图片的保存地址赋给一个隐藏域;
4。回到原来的页面,现在既完成了文件的上传,也在隐藏域内记录了文件的路径,整个过程没有刷新页面;
5。最后用户只需提交原来的页面时重置表单的行动和目标属性的值即可。

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

上传。php页面如下:

& lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"祝辞, 　　& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"祝辞, 　　& lt; head>, 　　& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/祝辞, 　　& lt; title> iFrame异步文件上传& lt;/title>, 　　时间/head> & lt; 　　& lt; body>, 　　& lt; h2> iFrame异步文件上传& lt;/h2>, 　　& lt; form 方法=皃ost", enctype=岸嗖糠?form-data"祝辞, 　　,,用户名:& lt; input 类型=皌ext", name=皍sername",/祝辞& lt; br /祝辞, 　　上才能传头像:,& lt; input 类型=癴ile", name=皍ploadphoto", onchange=皊tartUpload (this.form)“,/祝辞, 　　& lt;才能iframe , mce_ name=皍ploadframe"祝辞& lt;/iframe>, 　　& lt;才能input 类型=癶idden", id=皃hoto", name=皃hoto" https://www.yisu.com/zixun/, value="/> 　　

上传成功!

"; 　　html。美元='

用户名:“.htmlspecialchars ($ _POST['用户名'])。

”; 　　html。美元='

头像地址:“.htmlspecialchars ($ _POST['照片'])。

”; 　　html。美元='

<人力资源/> '; 　　echo $ html; 　　} 　　?> 　　　　　　<多国评价:脚本type=" text/javascript ">

proceedupload。php页面如下:

& lt; ? php //这里仅以特定图片格式举例,本应动态获取, 　　url 美元;=,& # 39;上传/img # 39;,只时间(),只& # 39;jpg # 39;,, 　　if (函数($带有_file [& # 39; uploadphoto& # 39;] [& # 39; tmp_name& # 39;],, $ url)), {,//才能删除之前的图片, 　　,,$ _POST[& # 39;照片# 39;],==,! & # 39;& # 39;,,,,分开($ _POST[& # 39;照片# 39;]),, 　　?祝辞, 　　& lt; html>, 　　& lt; head>, 　　& lt; body onLoad=癲oneLoading(母公司,& # 39;& lt; ?=$ url ?祝辞& # 39;)“祝辞, 　　时间/body> & lt; 　　时间/html> & lt; 　　& lt;多国评价:script 类型=拔谋?javascript"祝辞& lt; !,,//在页面上显示刚刚上传成功的图像, 　　function doneLoading (theFrame, url), {, 　　var 才能;oDiv =, theFrame.document.getElementById (& # 39; displayphoto& # 39;),, 　　oDiv.innerHTML 才能=,& # 39;& lt; https://www.yisu.com/zixun/img src=" + url +”mce_src=" + url +”alt="上传头像"/> '; 　　theFrame.document.getElementById(照片)。值=url; 　　}//- ->