前台代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{width:300px;height:30px;border:1px solid #000;position:relative;}
#div2{width:0px;height:30px;background:#CCC;}
#div3 {
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
left:0px;top:0px;
}
</style>
</head>
<body>
<input type="file" id="file"/><input type="button" id="btnFile" value="上传" />
<!--进度条-->
<div id="div1">
<div id="div2"></div>
<div id="div3">0%</div>
</div>
</body>
</html>
<script type="text/javascript">
var file = document.getElementById("file");
var btnFile = document.getElementById("btnFile");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
btnFile.onclick = function () {
var xml = new XMLHttpRequest();
xml.onload = function () {
alert(xml.responseText);
}
//上传进度条事件
var oUpload = xml.upload;
oUpload.onprogress = function (ev) {
//console.log(ev.total + ":" + ev.loaded);//ev.loaded是已经上传的 ev.total是总的
var iScale = ev.loaded / ev.total;//计算出比例
div2.style.width = 300 * iScale + "px";
div3.innerHTML = iScale*100 + "%";
}
xml.open("post", "HandlerFiles.ashx", true);
xml.setRequestHeader(‘X-Request-Width‘, ‘XMLHttpRequest‘);
var oFormData = new FormData();
oFormData.append("file",file.files[0]);
xml.send(oFormData);
}
</script>
原文：http://www.cnblogs.com/shuai7boy/p/5576199.html