ajax上传进度条
Posted wangshengl9263
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于ajax上传进度条的主要内容，如果未能解决你的问题，请参考以下文章