实现效果如图：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>石健涛工作室</title>
<style>
.box{
1000px;
margin: 100px auto;
text-align: center;
box-shadow:2px 2px 5px #000 ;
padding: 20px;
}
h1{
text-shadow: 1px 1px 2px #666;
}
a{
text-decoration: none;
background: #40c678;
color: #fff;
padding: 5px 8px;
box-shadow: 1px 1px 3px #000;
}
a:hover{
box-shadow: none;
}
ul{
list-style: none;
border-bottom: 1px solid #bab4b4;
}
li{
float: left;
}
ul:after{
clear: both;
content: "";
display: block;
}
ul:nth-child(odd){
background: #677677;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<h1>石健涛的云文件上传系统</h1>
<input type="file" id="files" onchange="fileup()" multiple style="display: none;" />
<a href="javascript:void(0);"onclick="fileChoice()">上传文件</a>
<div class="fileList" id="flist">
<ul>
<li style=" 30%;">文件名</li>
<li style=" 68%;">上传情况</li>
</ul>
</div>
<script type="text/javascript">
function fileChoice(){
document.getElementById("files").click();
}
function fileup(){
var files=document.getElementById("files").files;
var flist=document.getElementById("flist");
var html="";
for(var i=0;i<files.length;i++){
var file=files[i];
html+="<ul>"+
"<li style="30%">"+file.name+"</li>"+
"<li style="68%"><progress max=100 value=0 id='pro"+i+"'></progress></li>"+
"</ul>";
dofileup(file,index);
}
flist.innerHTML+=html;
}
function dofileup(file,index){
var FormData=new FormData();
FormData.append(file.name,file);
创建ajax对象
var xhr=new XMLHttprequest();
xhr.open("post","fileup.do",true);
xhr.send(FormData);
}
</script>
</body>
</html>