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

更新时间：2020年03月03日 10:07:43 作者：怀素真

这篇文章主要介绍了php 使用html5 XHR2实现上传文件与进度显示功能,结合实例形式分析了php 使用html5上传文件过程中progress事件返回进度信息相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

解决PHP4.0 和 PHP5.0类构造函数的兼容问题
以下是对解决PHP4.0和PHP5.0类构造函数兼容问题的方法进行了详细的分析介绍，需要的朋友可以过来参考一下
2013-08-08
php session的锁和并发
这篇文章主要介绍了php session的锁和并发，与之相关的现象有请求阻塞、session数据丢失、session数据读不到的问题，感兴趣的小伙伴们可以参考一下
2016-01-01
PHP自动选择连接本地还是远程数据库
假设我们要在test.php文件中操作虚拟主机的数据库，则首先要在本地调试，那么必然要连接本地、远程两个不同的数据库，问题：怎么让test.php自动识别当下该连接本地还是远程数据库呢？
2010-12-12
php消息队列实现详解
消息队列技术是分布式应用间交换信息的一种技术。消息队列可驻留在内存或磁盘上,队列存储消息直到它们被应用程序读出。通过消息队列，应用程序可独立地执行，它们不需要知道彼此的位置、或在继续执行前不需要等待接收程序接收此消息
2022-08-08
PHP中include/require/include_once/require_once使用心得
include() 、require()语句包含并运行指定文件。这两结构在包含文件上完全一样，唯一的区别是对于错误的处理。require()语句在遇到包含文件不存在，或是出错的时候，就停止即行，并报错。include()则继续即行。
2016-08-08
PHP封装的mysqli数据库操作类示例
这篇文章主要介绍了PHP封装的mysqli数据库操作类,涉及php针对mysqli数据库的连接、增删改查、分页、排序等相关操作技巧,需要的朋友可以参考下
2019-02-02
PHP快速排序算法实例分析
这篇文章主要介绍了PHP快速排序算法,结合实例形式分析了快速排序的原理、步骤及相关php定义与使用操作技巧,需要的朋友可以参考下
2018-07-07
DW中链接mysql数据库时，建立字符集中文出现乱码的解决方法
DW中链接mysql数据库时，建立字符集中文出现乱码“？？？？”
2010-03-03
php-fpm报502问题的解决办法
这篇文章主要介绍了php-fpm报502问题的解决办法，遇到此类问题的同学，可以参考下
2021-04-04
PHP文章按日期(月日)SQL归档语句
PHP文章按日期（月日）SQL归档PHP文章按日期（月）SQL归档实现语句，需要的朋友可以参考下
2012-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具