PHP+iframe模拟Ajax上传文件功能示例


Posted in PHP onJuly 02, 2019

本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考,具体如下:

xmlhttprequest level 1中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。

首先看一下效果图:

PHP+iframe模拟Ajax上传文件功能示例

文件结构图:

PHP+iframe模拟Ajax上传文件功能示例

09-iframe-upload.html文件:

页面中有一个表单,表单中有一个上传文件按钮和提交按钮,点击提交按钮执行ajaxUpload函数,然后动态创建iframe标签,让其不可见,最后设置表单的target属性指向iframe。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>iframe模拟Ajax上传文件</title>
  <link rel="stylesheet" href="">
</head>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
  /**
   * 文件上传
   * @return bool 是否提交表单
   * 1、捕捉表单提交的动作
   * 2、动态创建iframe标签,然其不可见
   * 3、设置表单的target属性指向iframe
   */
  function ajaxUpload(){
    var iframeName = 'upload'+Math.random();//给iframe取名
    $('<iframe name='+iframeName+' width="0" height="0" frameborder="0"></iframe>').appendTo($('body'));//动态创建iframe
    $('form:first').attr('target',iframeName);//设置form的target属性
    $('#progress').html('<img src="progress.jpg"/>');//显示上传是否成功
    //return false;
  }
</script>
<body>
  <h1>iframe模拟Ajax上传文件</h1>
  <h2 id="progress"></h2>
  <form action="09-iframe-upload.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxUpload();">
    <p><input type="file" name="pic"/></p>
    <p><input type="submit" value="提交" /></p>
  </form>
</body>
</html>

09-iframe-upload.php文件:

首先延时3秒,为了能看到加载的图片,然后判断是否有上传文件,然后返回一段Js代码,这段js是在页面中显示是否上传成功

<?php
/**
 * iframe模拟Ajax上传文件
 * @author webbc
 */
sleep(3);//延时3秒
if(empty($_FILES)){
  echo 'no file';
}
$error = $_FILES['pic']['error'] == 0?'succ':'fail';//判断上传是否成功
echo "<script>parent.document.getElementById('progress').innerHTML='$error'</script>";//显示上传是否成功
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
PHP 日期时间函数的高级应用技巧
Oct 10 PHP
php 正确解码javascript中通过escape编码后的字符
Jan 28 PHP
PHP合并数组+与array_merge的区别分析
Aug 01 PHP
apache+php完美解决301重定向的两种方法
Jun 08 PHP
探讨file_get_contents与curl效率及稳定性的分析
Jun 06 PHP
php中通过数组进行高效随机抽取指定条记录的算法
Sep 09 PHP
Drupal7中常用的数据库操作实例
Mar 02 PHP
php上传图片存入数据库示例分享
Mar 11 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
Feb 12 PHP
浅谈PDO的rowCount函数
Jun 18 PHP
php基于jquery的ajax技术传递json数据简单实例
Apr 15 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
Oct 16 PHP
PHP使用HTML5 FormData对象提交表单操作示例
Jul 02 #PHP
PHP实现带进度条的Ajax文件上传功能示例
Jul 02 #PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
Jul 01 #PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 #PHP
PHP大文件切割上传功能实例分析
Jul 01 #PHP
PHP使用反向Ajax技术实现在线客服系统详解
Jul 01 #PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
You might like
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php实现点击可刷新验证码
2015/11/07 PHP
js 浏览器事件介绍
2012/03/30 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python getpass实现密文实例详解
2019/09/24 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python绘制玫瑰的实现代码
2020/03/02 Python
企业新年寄语
2014/04/04 职场文书
公司委托书怎么写
2014/08/02 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
工作检讨书500字
2014/10/19 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年标准化工作总结
2014/12/17 职场文书
自我工作评价范文
2015/03/06 职场文书
安全教育的主题班会
2015/08/13 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
六年级情感作文之500字
2019/10/23 职场文书
golang json数组拼接的实例
2021/04/28 Golang
速龙x4-860k处理器相当于i几
2022/04/20 数码科技