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 相关文章推荐
PHP入门
Oct 09 PHP
UCenter Home二次开发指南
May 28 PHP
apache配置虚拟主机的方法详解
Jun 17 PHP
php生成高清缩略图实例详解
Dec 07 PHP
PHP支付系统设计与典型案例分享
Aug 02 PHP
php getcwd与dirname(__FILE__)区别详解
Sep 24 PHP
php中Ioc(控制反转)和Di(依赖注入)
May 07 PHP
PHP设计模式之适配器模式定义与用法详解
Apr 03 PHP
php-fpm服务启动脚本的方法
Apr 27 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
Jan 26 PHP
PHP二维数组分页2种实现方法解析
Jul 09 PHP
PHP实现倒计时功能
Nov 16 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
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
js Event对象的5种坐标
2011/09/12 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
社区工作感言
2014/02/21 职场文书
2014信息公开实施方案
2014/02/22 职场文书
音乐幼师求职信
2014/07/09 职场文书
公司证明怎么写
2014/09/22 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
结婚通知短信大全
2015/04/17 职场文书
结婚纪念日感言
2015/08/01 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫