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事件:传输结束,但是不知道成功还是失败。

  1. <!DOCTYPE HTML>
  2. <html >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form method="post" >
  9. <input type="file" name="file" />
  10. <input type="submit" name="submit" value="提交" />
  11. </form>
  12. <div ></div>
  13. </body>
  14. <script type="text/javascript">
  15. var myForm = document.getElementById("myForm");
  16. var upfile = document.getElementById("upfile");
  17. myForm.onsubmit = function() {
  18. //我们创建一个FormData对象
  19. var fd = new FormData();
  20. var file = upfile.files[0];
  21. //把文件添加到FormData对象中
  22. fd.append("file", file);
  23. var xhr = new XMLHttpRequest();
  24. xhr.onreadystatechange = function () {
  25. if (xhr.readyState == 4) {
  26. alert(this.responseText);
  27. }
  28. };
  29. xhr.open("post", "upfile.php", true);
  30. //监听上传事件
  31. xhr.upload.onprogress = function(ev) {
  32. //如果长度是可计算的
  33. if(ev.lengthComputable) {
  34. var percent = Math.round((ev.loaded / ev.total) * 100);
  35. document.getElementById("upStatus").innerHTML = percent + "%";
  36. }
  37. };
  38. //发送FormData对象
  39. xhr.send(fd);
  40. return false;
  41. };
  42. </script>
  43. </html>

upfile.php代码如下:

  1. <?php
  2. $uploadDir = './upload/';
  3. if(!file_exists($uploadDir)) {
  4. @mkdir($uploadDir, 0777, true);
  5. }
  6. $uploadFile = $uploadDir . basename($_FILES['file']['name']);
  7. if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
  8. echo "OK";
  9. } else {
  10. echo "NO";
  11. }

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