<script type="text/javascript">
? function register(){
?????????? var frm = document.getElementById(‘frm‘);
?????????? var fd = new FormData(frm);
?????????? var request = new XmlHttpRequest();
?????????? request.open(‘post‘, ‘./demo.php‘);
?????????? request.onreadystatechange = function(){
?????????????? if (request.readystate == 4 && request.status == 200) {
????????????????????? if(request.responseText == ‘1‘){
??????????????????????? alert(‘上传成功!‘);
????????????????????? }
?????????????? }
?????????? request.send(fd);
?????????? //上传进度条
?????????? request.upload.onprogress = function(e){
?????????? var total = e.total;//总大小
?????????? var loaded = e.loaded; //已上传的大小
?????????? var percent = Math.floor(loaded/total*100);
?????????? document.getElementById(‘in‘).style.width = percent+‘%‘;
?????????? document.getElementById(‘in‘).innerHTML = percent+‘%‘;
?????????? }
??????? }
}
???</script>
</head>
<body>
??<form id="frm">
?? 用户名:<input type="text" ?name="username"><br>
?? 头像:<input type="file" ?name="face"><br>
?? <div id="out">
?? <div id="in"></div>
?? </div>
???? <input type="button" ?value="上传" id="btn">
??</form>
</body>
ajax上传进度条
原文地址：https://www.cnblogs.com/wangshengl9263/p/9033485.html