当前位置：首页 > PHP教程 > php上传下载 > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2022-02-17 11:54:02　浏览: 评论：0　

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

Tags: html5 XHR2 php上传文件

分享到：

相关文章

推荐文章

热门文章

最新评论文章