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 09 PHP
编写PHP的安全策略
Oct 09 PHP
功能齐全的PHP发送邮件类代码附详细说明
Jul 10 PHP
php数组去重的函数代码
Feb 03 PHP
PHP实现设计模式中的抽象工厂模式详解
Oct 11 PHP
php实现mysql数据库分表分段备份
Jun 18 PHP
浅谈PHP中output_buffering
Jul 13 PHP
PHP执行linux命令常用函数汇总
Feb 02 PHP
Yii2 assets清除缓存的方法
May 16 PHP
php实现多维数组排序的方法示例
Mar 23 PHP
PHP命名空间namespace的定义方法详解
Mar 29 PHP
PHP小白必须要知道的php基础知识(超实用)
Oct 10 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
node中的session的具体使用
2018/09/14 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python3的socket使用方法详解
2020/02/18 Python
Python连接Impala实现步骤解析
2020/08/04 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
生产部经理岗位职责
2013/12/16 职场文书
策划总监岗位职责
2014/02/16 职场文书
和谐社区口号
2014/06/19 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年班务工作总结
2014/12/02 职场文书
销售2014年度工作总结
2014/12/08 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS