HTML篇
ajax#pro{
width:500px;
height:30px;
border:solid 1px green;
}
#bar{
width:0%;
height:100%;
background:green;
border:solid 1px green;
}
var xhr=new XMLHttpRequest();//ajax对象
function vote(){
var fd=new FormData();
var pic= document.getElementsByTagName('input')[0].files[0];
fd.append('pic',pic);
xhr.open('POST','./main.php',true); //打开 同步false 异步true
//利用XHR2的新标准,为上传过程,写一个监听函数; 文件在动 onprogress函数就在执行
xhr.upload.onprogress = function(ev){
console.log(ev); //查看对象上传的 “可调用”信息
if(ev.lengthComputable){ //可计算的长度
var percent = 100*(ev.loaded/ev.total);//ev.loaded代表已经上传的大小 ev.total代表文件总大小
document.getElementById('bar').style.width=percent+'%';
}
}
xhr.send(fd); //发送
//获取返回值
xhr.onreadystatechange=function(){
if(this.readyState==4){
var pg = document.getElementById('progress');
pg.innerHTML = this.responseText+'
';
}
}
}
后台PHP篇
<?php if( empty($_FILES) ){ exit('no file'); } if($_FILES['pic']['error']!= 0 ){ exit('fail'); } move_uploaded_file($_FILES['pic']['tmp_name'],'upload/'.$_FILES['pic']['name']); echo 'ok
'; print_r($_FILES); ?>