<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 (' Upload successful! ');
}
}
Request.send (FD);
Upload progress bar
Request.upload.onprogress = function (e) {
var total = e.total;//Overall Size
var loaded = e.loaded; Uploaded size
var percent = Math.floor (loaded/total*100);
document.getElementById (' in '). style.width = percent+ '% ';
document.getElementById (' in '). InnerHTML = percent+ '% ';
}
}
}
</script>
<body>
<form id= "frm" >
User name: <input type= "text" name= "username" ><br>
Avatar: <input type= "file" Name= "Face" ><br>
<div id= "Out" >
<div id= "in" ></div>
</div>
<input type= "button" value= "Upload" id= "btn" >
</form>
</body>
Ajax Upload progress bar