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获取网页内容方法总结
Dec 04 PHP
php cookis创建实现代码
Mar 16 PHP
php模板中出现空行解决方法
Mar 08 PHP
fleaphp rolesNameField bug解决方法
Apr 23 PHP
php面向对象 字段的声明与使用
Jun 14 PHP
wamp安装后自定义配置的方法
Aug 23 PHP
PHP实现的DES加密解密实例代码
Apr 06 PHP
谈谈php对接芝麻信用踩的坑
Dec 01 PHP
PHPMailer发送邮件
Dec 28 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
Apr 10 PHP
PHP与SQL语句写一句话木马总结
Oct 11 PHP
laravel中Redis队列监听中断的分析
Sep 14 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 文件上传类代码
2011/08/06 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
详解python字节码
2018/02/07 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
迟到检讨书900字
2014/01/14 职场文书
《假如》教学反思
2014/04/17 职场文书
毕业生求职信
2014/06/10 职场文书
班级活动总结格式
2014/08/30 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
小学生毕业评语
2014/12/26 职场文书
晚会闭幕词
2015/01/28 职场文书
加入学生会自荐书
2015/03/05 职场文书
行政处罚事先告知书
2015/07/01 职场文书
结婚典礼致辞
2015/07/28 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python