PHP+Ajax怎么实现上传文件进度条动态显示进度功能-创新互联
这篇文章主要介绍PHP+Ajax怎么实现上传文件进度条动态显示进度功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
天等网站建设公司创新互联,天等网站设计制作，有大型网站制作公司丰富经验。已为天等数千家提供企业网站建设服务。企业网站搭建\
成都外贸网站建设公司要多少钱，请找那个售后服务好的
天等做网站的公司定做！
说个前提：PHP配置文件中规定默认上传文件大小限制2M以下，如需上传大文件需同时更改php.ini中的upload_max_filesize和max_execution_time以及post_max_size的值。
主界面以及Ajax实现：index.html
上传文件
function sub() {
var obj = new XMLHttpRequest();
obj.onreadystatechange = function() {
if (obj.status == 200 && obj.readyState == 4) {
document.getElementById('con').innerHTML = obj.responseText;
}
}
// 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态
obj.upload.onprogress = function(evt) {
// 上传附件大小的百分比
var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
// 当上传文件时显示进度条
document.getElementById('parent').style.display = 'block';
// 通过上传百分比设置进度条样式的宽度
document.getElementById('son').style.width = per;
// 在进度条上显示上传的进度值
document.getElementById('son').innerHTML = per;
}
// 通过FormData收集零散的文件上传信息
var fm = document.getElementById('userfile3').files[0];
var fd = new FormData();
fd.append('userfile', fm);
obj.open("post", "upload.php");
obj.send(fd);
}
#parent {
width: 200px;
height: 20px;
border: 2px solid gray;
background: lightgray;
display: none;
}
#son {
width: 0;
height: 100%;
background: lightgreen;
text-align: center;
}
Ajax实现进度条文件上传
