php js文件上传进度条,js上传进度条的实现

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);  ?>