首先：得把php.ini中的post_max_size和upload_max_filesize改成200M或更大（进度条好看效果，默认是2M）
html和js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var fm=document.getElementsByTagName('form')[0];
fm.onsubmit=function(evt){//表单事件
var fd=new FormData(fm);//接受表单数据
var xhr=new XMLHttpRequest();
xhr.upload.onprogress=function(evt){//onprogress事件每0.1秒感应一次
//console.log(evt);
var loaded=evt.loaded;//已经上传的附件大小
var total=evt.total;//附件的总大小
var per=Math.floor((loaded/total)*100)+'%';
document.getElementById('son').style.width=per;
document.getElementById('son').innerHTML=per;
}
xhr.onreadystatechange=function(){//ajax返回状态
if (xhr.readyState==4) {
alert(xhr.responseText);
}
}
xhr.open('post','upload.php');//发送ajax方式和路径
xhr.send(fd);//发生表单数据
evt.preventDefault();//阻止浏览器跳转
}
}
</script>
<style>
#pat{
width:400px;
height:5px;
border:1px solid blue;
}
#son{
width:0;
height:100%;
background-color:yellow;
}
</style>
</head>
<body>
<form action="upload.php" >
用户名：<input type="text" name='username'><br>
<input type="file" name='file'><br>
<input type="submit" value='提交'>
<br><br>
<div id='pat'><div id='son'></div></div>
</body>
</html>
php代码：
<?php
if ($_FILES['file']['error']>0) {
exit('上传异常');
}
$path='./upload/';
$name=mt_rand('000','999').$_FILES['file']['name'];//在名字前加上三位随机数，这样能多次上传同一文件
$truename=$path.$name;
$truename=iconv('UTF-8','gb2312',$truename);//转码，使得能够上传中文名称附件
if (move_uploaded_file($_FILES['file']['tmp_name'],$truename)) {//$_FILES['file']['tmp_name']为临时存放目录
echo 'upload success';
}else{
echo 'upload error';
}
?>
效果图：