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 相关文章推荐
NT IIS下用ODBC连接数据库
Oct 09 PHP
收集的DedeCMS一些使用经验
Mar 17 PHP
如何使用php判断服务器是否是HTTPS连接
Jul 05 PHP
浅析Yii2缓存的使用
May 10 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
Sep 09 PHP
如何离线执行php任务
Feb 21 PHP
laravel如何开启跨域功能示例详解
Aug 31 PHP
PHP中的浅复制与深复制的实例详解
Oct 26 PHP
laravel ORM 只开启created_at的几种方法总结
Jan 29 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
Mar 07 PHP
PHP7.3.10编译安装教程
Oct 08 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
Mar 30 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于python的ini配置文件操作工具类
2019/04/24 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
2014财务人员自我评价范文
2014/09/21 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
调解书格式范本
2015/05/20 职场文书
入党积极分子考察意见
2015/06/02 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
详解Go语言中Get/Post请求测试
2022/06/01 Golang
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
Redis+AOP+自定义注解实现限流
2022/06/28 Redis