PHP+iframe模拟Ajax上传文件功能示例
时间:2022-07-27
本文章向大家介绍PHP+iframe模拟Ajax上传文件功能示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考,具体如下:
在xmlhttprequest level 1
中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?答案:可以使用iframe
模拟Ajax上传文件。接下来博主将使用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 ";//显示上传是否成功
?
- HDUOJ-----2066一个人的旅行
- HDUOJ --2544最短路(基础)
- 帮同学的忙,随意写了个课程设计(关于循环双向列表)
- HDUOJ---3371Connect the Cities
- 初学HTML一些基本控件语句
- java学习之第五章编程题示例(初学篇)
- java第四章编程题(初学篇)
- java测试Unicode编码以及数组的运用(初学篇)
- HDUOJ---1754 Minimum Inversion Number (单点更新之求逆序数)
- HDUOJ-------1753大明A+B(大数之小数加法)
- HDUOJ---1754 I Hate It (线段树之单点更新查区间最大值)
- HDUOJ----1166敌兵布阵(线段树单点更新)
- poj----2155 Matrix(二维树状数组第二类)
- poj------2352 Stars(树状数组)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入浅出mongodb之实战
- 想成为可视化高手?这篇合集就够了 | Vue
- 谈谈Vue开发过程中用到的插件
- 快速入门使用tikz绘制深度学习网络图
- why哥被一道基础面试题给干懵了,一气之下写出万字长文。
- 结构与算法(03):单向链表和双向链表
- 有赞crash平台符号化实践
- 什么是时间分片(Time Slicing)?
- 逐行分析鸿蒙系统的 JavaScript 框架
- 48张小图带你领略Flex 布局之美
- 怎样设计一个 JavaScript 插件系统
- 一道 React 面试题:在浏览器、组件和元素中都渲染了些什么?
- 「新手入门福利」一张脑图带你掌握Git命令
- LeetCode | 58.最后一个单词的长度
- 模拟面试,解锁大厂 ——从Android的事件分发说起