HTML篇
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<style>
#pro{
width:500px;
height:30px;
border:solid 1px green;
}
#bar{
width:0%;
height:100%;
background:green;
border:solid 1px green;
}
</style>
</head>
<script type="text/javascript">
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+'<br/>';
}
}
}
</script>
<body>
<div>
<input type="file" οnchange="vote();"/>
</div>
<div id="pro">
<div id="bar"></div>
</div>
<div id="progress"></div>
</body>
</html>
后台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<br/>';
print_r($_FILES);
?>
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
