正文
ajax上传进度条
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<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>
