html ajax 上传进度条,html5 ajax带进度条的无刷新上传

Title

#div1{width: 300px;height: 30px;border: 1px solid black}

#div2{width: 0;height: 30px;background: #ccc; position: relative}

#div3{width: 300px;height: 30px; line-height: 30px; text-align: center;position: absolute;left: 0;top: 0;}

window.onload = function () {

var oBtn = document.getElementById('btn');

var oFile = document.getElementById('file');

var oDiv1 = document.getElementById('div1');

var oDiv2 = document.getElementById('div2');

var oDiv3 = document.getElementById('div3');

oBtn.onclick = function () {

/* alert(oFile.files);*/

/* for(var attr in oFile.files){

console.log(attr + ' : ' + oFile.files)

}*/

var xhr = new XMLHttpRequest();

xhr.onload = function () {

alert('上传成功');

};

var oUpload = xhr.upload;

oUpload.onprogress = function (ev) {

//console.log(ev.total + ':' + ev.loaded);

var iScale = ev.loaded/ev.total;//这里自己可以截取小数点几位

oDiv2.style.width = 300*iScale+'px';

oDiv3.innerHTML = iScale*100 + '%';

};

xhr.open('post','post_file.php',true);

xhr.setRequestHeader('X-Request-With','XMLHttpRequest');

var formData = new FormData();

formData.append('file',oFile.files[0]);

xhr.send(formData);

}

}

0%

简单地一个实例而已

后台

/**

* Created by PhpStorm.

* User: Strip

* Date: 2016/8/26

* Time: 12:47

*/

header('Content-type:text/html;charset="utf-8"');

$upload_dir = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){

exit_status(array('code'=>1,'msg'=>'提交方式错误'));

}

if(array_key_exists('file',$_FILES)&&$_FILES['file']['error'] == 0){

$pic = $_FILES['file'];

if(move_uploaded_file($pic['tmp_name'],$upload_dir.$pic['name'])){

exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));

}

}

echo $_FILES['file']['error'];

exit_status(array('code'=>1,'msg'=>'出现错误'));

function exit_status($str){

echo json_encode($str);

exit;

}