这篇文章给大家分享的是有关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
一、phpStudy，是一个新手入门最常用的开发环境。二、WampServer，WampServer也同样的也是和phpStudy一样操作简单对小白比较友好。三、XAMPP，XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包；四、MAMP，MAMP分为两种MAMP和MAMP Pro for Mac。五、宝塔面板，宝塔面板是一款服务器管理软件，支持windows和linux系统。六、UPUPW，UPUPW是目前Windows平台下最具特色的Web服务器PHP套件。
感谢各位的阅读！关于“php使用html5 XHR2如何实现上传文件与进度显示功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
