php 使用html5 XHR2实现上传文件与进度显示功能示例


Posted in PHP onMarch 03, 2020

本文实例讲述了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 相关文章推荐
Apache2 httpd.conf 中文版
Dec 06 PHP
php实现的MySQL通用查询程序
Mar 11 PHP
php 修改、增加xml结点属性的实现代码
Oct 22 PHP
Linux中用PHP判断程序运行状态的2个方法
May 04 PHP
PHP实现采集中国天气网未来7天天气
Oct 15 PHP
CodeIgniter钩子用法实例详解
Jan 20 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
Jan 28 PHP
php实现将HTML页面转换成word并且保存的方法
Oct 14 PHP
php使用高斯算法实现图片的模糊处理功能示例
Nov 11 PHP
php指定长度分割字符串str_split函数用法示例
Jan 30 PHP
PHP实现合并两个排序链表的方法
Jan 19 PHP
Laravel如何创建服务器提供者实例代码
Apr 15 PHP
php+ajax实现文件切割上传功能示例
Mar 03 #PHP
php 输出缓冲 Output Control用法实例详解
Mar 03 #PHP
PHP 加密 Password Hashing API基础知识点
Mar 02 #PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
Mar 02 #PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
Mar 02 #PHP
让whoops帮我们告别ThinkPHP6的异常页面
Mar 02 #PHP
php高性能日志系统 seaslog 的安装与使用方法分析
Feb 29 #PHP
You might like
Oracle 常见问题解答
2006/10/09 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Js和VUE实现跑马灯效果
2020/05/25 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python安装scipy的步骤解析
2019/09/28 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
审计专业自荐信范文
2014/04/21 职场文书
庆元旦演讲稿
2014/09/15 职场文书
高中社区服务活动报告
2015/02/05 职场文书
关于迟到的检讨书
2015/05/06 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
python语言中pandas字符串分割str.split()函数
2022/08/05 Python