php 使用html5 XHR2实现上传文件与进度显示功能示例
时间:2022-07-27
本文章向大家介绍php 使用html5 XHR2实现上传文件与进度显示功能示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了php 使用html5 XHR2实现上传文件与进度显示功能。分享给大家供大家参考,具体如下:
思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了。
在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息。
它分成上传和下载两种情况
1.下载的progress事件属于XMLHttpRequest对象 2.上传的progress事件属于XMLHttpRequest.upload对象。
与progress事件相关的,还有其他五个事件:
1.load事件:传输成功完成。 2.abort事件:传输被用户取消。 3.error事件:传输中出现错误。 4.loadstart事件:传输开始。 5.loadEnd事件:传输结束,但是不知道成功还是失败。
<!DOCTYPE HTML
<html lang="zh-CN"
<head
<meta charset="UTF-8"
<title </title
</head
<body
<form method="post" id="myForm"
<input type="file" name="file" id="upfile" /
<input type="submit" name="submit" value="提交" /
</form
<div id="upStatus" </div
</body
<script type="text/javascript"
var myForm = document.getElementById("myForm");
var upfile = document.getElementById("upfile");
myForm.onsubmit = function() {
//我们创建一个FormData对象
var fd = new FormData();
var file = upfile.files[0];
//把文件添加到FormData对象中
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert(this.responseText);
}
};
xhr.open("post", "upfile.php", true);
//监听上传事件
xhr.upload.onprogress = function(ev) {
//如果长度是可计算的
if(ev.lengthComputable) {
var percent = Math.round((ev.loaded / ev.total) * 100);
document.getElementById("upStatus").innerHTML = percent + "%";
}
};
//发送FormData对象
xhr.send(fd);
return false;
};
</script
</html
upfile.php代码如下:
<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
@mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
echo "OK";
} else {
echo "NO";
}
如果上传过程中PHP出现如下信息:
Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
说明文件大小超出了PHP设置限制,可以设置php.ini
;脚本解析输入数据(类似 POST 和 GET)允许的最大时间,单位是秒。
;它从接收所有数据到开始执行脚本进行测量的。
max_input_time = 60
;允许客户端单个POST请求发送的最大数据
post_max_size = 64M
;是否开启文件上传功能
file_uploads = On
;文件上传的临时存放目录(如果不指定,使用系统默认的临时目录)
;upload_tmp_dir =
;允许单个请求上传的最大文件大小
upload_max_filesize = 64M
;允许单个POST请求同时上传的最大文件数量
max_file_uploads = 20
更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》
希望本文所述对大家PHP程序设计有所帮助。
- ExtJs学习笔记(24)-Drag/Drop拖动功能
- 人工智能尚处探索阶段,为何我们对此异常焦虑
- ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页
- 同步服务器系统时间操作记录
- kvm虚拟化管理平台WebVirtMgr部署-完整记录(安装Windows虚拟机)-(4)
- ExtJs学习笔记(11)_Absolute布局和Accordion布局
- ExtJs学习笔记(9)_Window的基本用法
- DateTime在ExtJs中无法正确序列化的问题
- ELK实时日志分析平台环境部署--完整记录
- 梳理Linux下OSI七层网络与TCP/IP五层网络架构
- 字符编码-使用c#研究
- iframe高度自适应的IE解决方案
- javascript读写本机文本文件
- 崔立鹏:腾讯云为知识竞技游戏提供解决方案
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【C语言简单说】三:浮点数变量和字符变量(4)
- 【C语言简单说】三:变量总结ASCII码扩展(5)
- 【C语言简单说】四:常量
- 【C语言简单说】五:常用运算符
- 【C语言简单说】六:取模运算符以及变量的扩展
- 【C语言简单说】七:自定义函数(1)
- 【C语言简单说】七:自定义函数(2)
- 【C语言简单说】七:自定义函数(3)
- 【C语言简单说】八:分支结构之if(1)
- 【C语言简单说】八:分支结构之if...else...(2)
- 【C语言简单说】八:分支结构之if...else if()...else...(3)
- 【C语言简单说】九:输入
- 【C语言简单说】十:小结
- 【C语言简单说】十一:switch 补
- 【C语言简单说】十二:逻辑运算符&&