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

吾爱主题阅读：195 2021-09-30 14:41:00 评论：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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!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代码如下：

1 2 3 4 5 6 7 8 9 10 11 <?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ;脚本解析输入数据(类似 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程序设计有所帮助。

原文链接：https://www.cnblogs.com/jkko123/p/6294582.html

可以去百度分享获取分享代码输入这里。

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。