目的当然还是为了提高用户的体验度嘛，，
废话不多说走码。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#jdt{ width:300px; height:25px; }
progress{ display:none; width:200px; height:25px; float:left; }
#sd{ float:left; }
</style>
<script>
function selefile(){
//创建FormData对象
var fd = new FormData();
//获取文件对象
var pic = document.getElementsByTagName('input')[0].files[0];
//把文件内容追加到表单数据里
fd.append('pic',pic);
//创建xmlhttprequest对象
var xhr = new XMLHttpRequest();
//打开
xhr.open('POST','12.php',true);
//利用xhr2的新标准，为上传过程写自定义一个函数
xhr.upload.onprogress = function(event){
if(event.lengthComputable){
//获取他的百分比
var bfb = 100 * event.loaded / event.total;
var bfbtwo = Math.ceil(bfb);
var pro = document.getElementsByTagName('progress')[0];
pro.style.display = 'block';
pro.setAttribute('value',bfbtwo);
var sd = document.getElementById('sd');
sd.innerHTML = bfbtwo +'%';
}
}
//接收返回值
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('desc').innerHTML = this.responseText;
}
}
//发送fd给后端
xhr.send(fd);
}
</script>
</head>
<body> <div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div>
<input type="file" name="pic" onchange="selefile();" >
<div id="desc"></div>
</body>
</html>
<?php
//print_r($_FILES); if(empty($_FILES)){
exit('No file');
} if($_FILES['pic']['error'] != 0){
exit('no file');
}
$picaddress = 'upload/'.time().rand();
move_uploaded_file($_FILES['pic']['tmp_name'],$picaddress.'.jpg');
echo 'OK';
效果如下所示：