kubp/upload.html

## upload.html
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
	return document.getElementById(el);
}
function uploadFile(){
	var file = _("avatar").files[0];
	// alert(file.name+" | "+file.size+" | "+file.type);
	var formdata = new FormData();
	formdata.append("avatar", file);
	var ajax = new XMLHttpRequest();
	ajax.upload.addEventListener("progress", progressHandler, false);
	ajax.addEventListener("load", completeHandler, false);
	ajax.addEventListener("error", errorHandler, false);
	ajax.addEventListener("abort", abortHandler, false);
	ajax.open("POST", "upload");
	ajax.send(formdata);
}
function progressHandler(event){
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
	var percent = (event.loaded / event.total) * 100;
	_("progressBar").value = Math.round(percent);
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
	_("status").innerHTML = event.target.responseText;
	_("progressBar").value = 0;
}
function errorHandler(event){
	_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
	_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload" enctype="multipart/form-data" method="post">
  <input type="file" name="avatar" id="avatar"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	/* Script written by Adam Khoury @ DevelopPHP.com */
	/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
	function _(el){
	return document.getElementById(el);
	}
	function uploadFile(){
	var file = _("avatar").files[0];
	// alert(file.name+" \| "+file.size+" \| "+file.type);
	var formdata = new FormData();
	formdata.append("avatar", file);
	var ajax = new XMLHttpRequest();
	ajax.upload.addEventListener("progress", progressHandler, false);
	ajax.addEventListener("load", completeHandler, false);
	ajax.addEventListener("error", errorHandler, false);
	ajax.addEventListener("abort", abortHandler, false);
	ajax.open("POST", "upload");
	ajax.send(formdata);
	}
	function progressHandler(event){
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
	var percent = (event.loaded / event.total) * 100;
	_("progressBar").value = Math.round(percent);
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
	}
	function completeHandler(event){
	_("status").innerHTML = event.target.responseText;
	_("progressBar").value = 0;
	}
	function errorHandler(event){
	_("status").innerHTML = "Upload Failed";
	}
	function abortHandler(event){
	_("status").innerHTML = "Upload Aborted";
	}
	</script>
	</head>
	<body>
	<h2>HTML5 File Upload Progress Bar Tutorial</h2>
	<form id="upload" enctype="multipart/form-data" method="post">
	<input type="file" name="avatar" id="avatar"><br>
	<input type="button" value="Upload File" onclick="uploadFile()">
	<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
	<h3 id="status"></h3>
	<p id="loaded_n_total"></p>
	</form>
	</body>
	</html>