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

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了PHP+iFrame实现页面无需刷新的异步文件上传脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了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页面如下:

<PRe class="brush:PHp;"> PE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XMlns="http://www.w3.org/1999/xhtml"> iFrame异步<a href="https://www.js-code.com/tag/wenjian/" target="_blank" class="keywords">文件</a><a href="https://www.js-code.com/tag/shangchuan/" target="_blank" class="keywords">上传</a>

iFrame异步文件上传

用户名:
上传头像:

脚本宝典总结

以上是脚本宝典为你收集整理的PHP+iFrame实现页面无需刷新的异步文件上传全部内容,希望文章能够帮你解决PHP+iFrame实现页面无需刷新的异步文件上传所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。