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 程式大小
Dec 06 PHP
php 修改、增加xml结点属性的实现代码
Oct 22 PHP
php输入流php://input使用示例(php发送图片流到服务器)
Dec 25 PHP
非常有用的9个PHP代码片段
Apr 06 PHP
简单概括PHP的字符串中单引号与双引号的区别
May 07 PHP
php自动提交表单的方法(基于fsockopen与curl)
May 09 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
Jul 25 PHP
浅析Laravel5中队列的配置及使用
Aug 04 PHP
php微信公众平台开发(四)回复功能开发
Dec 06 PHP
php 类中的常量、静态属性、非静态属性的区别
Apr 09 PHP
yii2 上传图片的示例代码
Nov 02 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
python中尾递归用法实例详解
2015/04/28 Python
解析Python编程中的包结构
2015/10/25 Python
python验证码识别的实例详解
2016/09/09 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
七一讲话心得体会
2014/09/05 职场文书
实习证明格式范文
2014/10/14 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
安全承诺书格式范本
2015/04/28 职场文书
公积金具结保证书
2015/05/11 职场文书
教师读书活动心得体会
2016/01/14 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS