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程序设计有所帮助。

相关文章

  • php cout&lt;&lt;的一点看法

    php cout&lt;&lt;的一点看法

    cout<<运算符后面如果是常整数,那么最大可以输出4294967295,即2^32-1,不允许出现负数,也就是说,cout<<运算符对于常整数只重载了unsigned int型;对于有小数的情况,则保留6位有效数字.
    2010-01-01
  • php模仿asp Application对象在线人数统计实现方法

    php模仿asp Application对象在线人数统计实现方法

    这篇文章主要介绍了php模仿asp Application对象在线人数统计实现方法,通过一个比较简单的自定义函数实现这一功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 如何用C语言编写PHP扩展的详解

    如何用C语言编写PHP扩展的详解

    本篇文章是对用C语言编写PHP扩展进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • 通过Email发送PHP错误的方法

    通过Email发送PHP错误的方法

    这篇文章主要介绍了通过Email发送PHP错误的方法,实例分析了php错误的读取及通过php发送Email的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • php下网站防IP攻击代码,超级实用

    php下网站防IP攻击代码,超级实用

    现在做外国网络,访问量越来越高了,最近有很多不良IP不停的进行攻击,由于不是自己的主机,所以,只能通过代码去阻止它们。
    2010-10-10
  • php mysql PDO 查询操作的实例详解

    php mysql PDO 查询操作的实例详解

    这篇文章主要介绍了php mysql PDO 查询操作的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • PHP命名空间简单用法示例

    PHP命名空间简单用法示例

    这篇文章主要介绍了PHP命名空间简单用法,结合具体实例形式分析了php命名空间的简单定义与使用相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • PHPMyadmin 配置文件详解(配置)

    PHPMyadmin 配置文件详解(配置)

    PHPMyadmin配置文件config.inc.php内容如下,在需要设置的地方增加了相关注释。
    2009-12-12
  • Paypal实现循环扣款(订阅)功能

    Paypal实现循环扣款(订阅)功能

    本文主要介绍了Paypal实现循环扣款(订阅)的思路与方法;并对如何使用Paypal的支付接口做下总结,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • php网页病毒清除类

    php网页病毒清除类

    这篇文章主要介绍了php网页病毒清除类,可实现针对网页病毒的简单清理功能,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12

最新评论