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

当前位置:

首页 > PHP >

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";

}