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

站长资源 2024/11/26 佚名

2 0 1

本文实例讲述了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> 
<"'.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,页面,无需刷新,异步,文件上传

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

异步加载技术实现当滚动条到最底部的瀑布流效果

PHP使用静态方法的几个注意事项

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接