好资源导航 » 文章资讯 » php 使用html5 XHR2实现上传文件与进度显示功能示例

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

2023-07-29 21:55:05 61

本文实例讲述了php使用html5XHR2实现上传文件与进度显示功能。分享给大家供大家参考，具体如下：

思路：只要我们知道上传文件的总大小，还有上传过程中上传文件的大小，那么就可以实现进度显示了。

在html5中，XMLHttpRequest对象，传送数据的时候，progress事件用来返回进度信息。

它分成上传和下载两种情况

1.下载的progress事件属于XMLHttpRequest对象
2.上传的progress事件属于XMLHttpRequest.upload对象。

与progress事件相关的，还有其他五个事件：

1.load事件：传输成功完成。
2.abort事件：传输被用户取消。
3.error事件：传输中出现错误。
4.loadstart事件：传输开始。
5.loadEnd事件：传输结束，但是不知道成功还是失败。

varmyForm=document.getElementById("myForm"); varupfile=document.getElementById("upfile"); myForm.onsubmit=function(){ //我们创建一个FormData对象 varfd=newFormData(); varfile=upfile.files[0]; //把文件添加到FormData对象中 fd.append("file",file); varxhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ alert(this.responseText); } }; xhr.open("post","upfile.php",true); //监听上传事件 xhr.upload.onprogress=function(ev){ //如果长度是可计算的 if(ev.lengthComputable){ varpercent=Math.round((ev.loaded/ev.total)*100); document.getElementById("upStatus").innerHTML=percent+"%"; } }; //发送FormData对象 xhr.send(fd); returnfalse; };

upfile.php代码如下：

如果上传过程中PHP出现如下信息：

Warning:POSTContent-Lengthof625523488bytesexceedsthelimitof8388608bytesinUnknownonline0

说明文件大小超出了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

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

希望本文所述对大家PHP程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐