File "00index.html"

Full Path: /home/analogde/www/FormData/00index.html
File size: 5.07 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<html>
<head>
	<title>AJAXUploader :: FormData method</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	
	<!--Using the TimeStructure.js and SizeStructure.js to convert number of seconds and bytes to well structured format-->
	<script src="js/TimeStructure.js"></script>
	<script src="js/SizeStructure.js"></script>
	<script>
		var xhr, hUploadSpeed;
		function sendFile()
		{
			document.getElementById("serverresponse").innerHTML = "";//clear previous server response
			
			var url = "upload.php";
			var formData = new FormData(document.getElementById("form1"));
			xhr = new XMLHttpRequest();
			
			xhr.upload.addEventListener('progress', uploadProgress, false);//EventListener for upload progress
			xhr.addEventListener('abort', uploadAbort, false);//EventListener for abort
			xhr.addEventListener('error', uploadError, false);//EventListener for error
			xhr.addEventListener('load', uploadThrough, false);//EventListener for completed upload
			
			xhr.open("POST", url, true);
			//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //no longer necessary here
			xhr.onreadystatechange = function()
			{
				if(xhr.readyState == 4 && xhr.status == 200)
				{
					document.getElementById("serverresponse").innerHTML = xhr.responseText;
				}
			}
			
			xhr.send(formData); //Send to server
			hUploadSpeed = setInterval(UploadSpeed, 1000); //per seconds
		}
		
		/*From here down is same for all the methods, notifications, and other eventListeners*/
		var i = new TimeStructure();//creating a TimeStructure object
		var j = new SizeStructure();//creating a SizeStructure object
		
		function abort()
		{
			clearInterval(hUploadSpeed);
			xhr.abort();
		}

		var uploaded = 0, prevUpload = 0, speed = 0, total = 0, remainingBytes = 0, timeRemaining = 0;
		function uploadProgress(e)
		{
			if (e.lengthComputable) 
			{
				uploaded = e.loaded;
				total = e.total;
				//percentage
				var percentage = Math.round((e.loaded / e.total) * 100);
				document.getElementById('progress_percentage').innerHTML = percentage + '%';
				document.getElementById('progress').style.width = percentage + '%';
				
				document.getElementById("remainingbyte").innerHTML =  j.BytesToStructuredString(e.total - e.loaded);//remaining bytes
				document.getElementById('uploadedbyte').innerHTML = j.BytesToStructuredString(e.loaded);//uploaded bytes
				document.getElementById('totalbyte').innerHTML = j.BytesToStructuredString(e.total);//total bytes
			}
		}
		
		function uploadAbort()
		{
			document.getElementById('progress_percentage').innerHTML = '0%';
			document.getElementById('progress').style.width = '0px';
			document.getElementById("serverresponse").innerHTML = "Upload canceled";
			xhr = null;
		}
		
		function uploadError()
		{
			document.getElementById('progress_percentage').innerHTML = '0%';
			document.getElementById('progress').style.width = '0px';
			document.getElementById("serverresponse").innerHTML = "An error occured.";
			clearInterval(hUploadSpeed);
			xhr = null;
		}
		
		function uploadThrough()
		{
			document.getElementById('progress_percentage').innerHTML = 'Upload completed!';
			UploadSpeed();//flush
			clearInterval(hUploadSpeed);
			xhr = null;
		}
		
		function UploadSpeed()
		{
			//speed
			speed = uploaded - prevUpload;
			prevUpload = uploaded;
			document.getElementById("speed").innerHTML = j.SpeedToStructuredString(speed);
			//Calculating ETR
			remainingBytes = total - uploaded;
			timeRemaining = remainingBytes / speed;
			document.getElementById("ETR").innerHTML = i.SecondsToStructuredString(timeRemaining);
		}
	</script>
</head>
<body>
	<header>
		<h1>the FormData method</h1>
		This shows how to upload file through AJAX using the the FormData method.
	</header>
	<div class="container">
		<form id="form1" name="form1" enctype="multipart/form-data">
			<table width="100%">
				<tr><td style="width:100px;">File 1:</td><td><input type="file" id="file1" name="file1"></td></tr>
				<tr><td>File 2:</td><td><input type="file" id="file2" name="file2"></td></tr>
				<tr><td>Your name:</td><td><input type="text" id="uname" name="uname" placeholder="Your name"></td></tr>
				<tr><td></td><td><input type="button" value="Send" onclick="sendFile();" /> <input type="button" value="Abort" onclick="abort();" /></td></tr>
			</table>
		</form>
		
		<div id="progress" style="margin: 10px 5px;"></div><br><br>
		
		<table border=1 width="100%">
			<tr><td style="width:250px;">Percentage Completed:</td><td><span id="progress_percentage">0%</span></td></tr>
			<tr><td>Speed:</td><td><span id="speed">0 b/s</span></td></tr>
			<tr><td>Estimated Time Remaining:</td><td><span id="ETR">0 seconds</span></td></tr>
			<tr><td>Remaining:</td><td><span id="remainingbyte">0 bytes</span></td></tr>
			<tr><td>Sent:</td><td><span id="uploadedbyte">0 bytes</span></td></tr>
			<tr><td>Total:</td><td><span id="totalbyte">0 bytes</span></td></tr>
			<tr><td>Server response:</td><td><span id="serverresponse"></span></td></tr>
		</table>
	</div>
</body>
</html>