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

本文描述了一个PHP iFrame在不刷新页面的情况下上传异步文件的例子，这是一个非常实用和常见的技巧。分享给大家参考。具体分析如下：

说到iframe，现在用它的人越来越少，很多人认为应该用AJAX来代替，这是真的，因为AJAX实在是太优秀了。

然而，我选择iframe是为了实现一种情况，即本文中的文件异步上传。如果你感兴趣，你可以试试。用本机AJAX实现它应该要复杂得多。

我们先补充一下初学者的基础知识：

1.通常，iframe标签的名称属性将被指定用于标识；2.在表单中，通过动作(目标地址)和目标(目标窗口，默认为_self)确定提交目的地；3.将表单中的目标指向iframe的名称，然后将表单提交给隐藏框架iframe；4.iframe中的内容实际上是一个页面，js中的父对象是指父页面，也就是内嵌在iFrame中的页面；5.在PHP中，move_uploaded_file()函数用于上传文件，而$_FILES数组存储上传文件的相关信息。

本文实现了一个用户选择头像文件后立即上传并显示在页面上的例子。不用说，想法如下：

1.在表单中嵌入iframe并设置name属性值；2.当选择用于文件上传的控件的值发生变化时触发js函数，将表单提交给iframe，内嵌在iframe中的页面用于处理文件上传；3.在iframe中完成文件上传后，在js中操作父页面，将图片显示在特定的标签中，并将图片的存储地址分配给隐藏字段；4.回到原来的页面，文件已经上传，文件路径已经记录在隐藏域中，整个过程没有刷新页面；5.最后，用户只需在提交原始页面时重置表单的操作和目标属性的值。

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

Upload.php页面如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/titleiFrame异步文件上传/title /head body h1iFrame异步文件上传/h1formmethod=' post ' enctype=' multipart/Form-data ' username : input Type=' text ' name=' username '/br/上传头像：Input Type=' file' name='上传照片' onchange='开始上传(这。form)'/iframe style=' display : none ' MCE _ style=' display : none ' name=' upload frame '/iframe输入类型=' hidden ' id=' photo ' name=' photo ' value=' '/Div id=' display photo '/Div输入类型=' submit ' name=' submit ' value=' submit ' onclick=' form submit(this。form)'//form？Php //页面提交后，如果(isset ($ _ post ['提交']) {$ html=' HR/p上传成功！/p '；$html。='p用户名：'。html specialchars($ _ post[' username '])。/p '；$html。='p头像地址：'。html specialchars($ _ post[' photo '])。/p '；$html。=' divimg src=' http: '。html specialchars($ _ POST[' photo '])。”mce_src='http: '。html specialchars($ _ POST[' photo '])。”//div HR/'；echo $ html} ?/body/html MCE : script type=' text/JavaScript '！-//选择文件后开始异步上传。函数start upload(oform){ document . getelementbyid(' display photo ')。innerhtml='正在加载.'；oform . action=' proceedpload . PHP '；oForm.target=' uploadframeoform . submit()；}//提交整页功能表单提交(oform) {oform。action=document.urloForm.target=' _ selfoform . submit()；}////MCE :脚本proceedupload.php页面如下：

？php /这里仅以特定图片格式举例，本应动态获取$url="上传/img .时间(). jpg '；if(move _ uploaded _ file($ _ FILES['上传照片'][' tmp _ name ']，$url)) { //删除之前的图片$_POST['照片']!==' ' unlink($ _ POST[' photo '])；超文本标记语言头体onLoad='doneLoading(父级),=$url？)'/body/html MCE :脚本类型=' text/JavaScript '！- //在页面上显示刚刚上传成功的图像函数完成加载(f帧，URL){ var oDiv=f帧。文件。getelementbyid('显示照片')；奥迪夫。innerhtml=' img src=' http : ' URL ' ' MCE _ src=' http : ' URL ' ' alt='上传头像' /';框架。文件。getelementbyid('照片').value=url}////MC e :脚本？php }？感兴趣的朋友可以测试运行一下本文实例，相信本文所述对大家服务器端编程语言(专业超文本预处理器的缩写)程序设计的学习有一定的借鉴价值。