欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-14 16:29:15
本文实例讲述了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";
}

如果上传过程中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

上一篇： Jquery ajax书写方法代码实例解析

下一篇： 经常口腔溃疡就像经历了一场什么的磨难

推荐阅读