Hi guys,

I have these codes below,
        $(document).ready(function() { 
		var progressbox 	= $('#progressbox');
		var progressbar 	= $('#progressbar');
		var statustxt 		= $('#statustxt');
		var submitbutton 	= $("#SubmitButton");
		var myform 			= $("#UploadForm");
		var output 			= $("#output");
		var completed 		= '0%';

				beforeSend: function() { //brfore sending form
					submitbutton.attr('disabled', ''); // disable upload button
					progressbox.show(); //show progressbar
					progressbar.width(completed); //initial value 0% of progressbar
					statustxt.html(completed); //set status text
					statustxt.css('color','#000'); //initial color of status text
				uploadProgress: function(event, position, total, percentComplete) { //on progress
					progressbar.width(percentComplete + '%') //update progressbar percent complete
					statustxt.html(percentComplete + '%'); //update status text
							statustxt.css('color','#fff'); //change status text to white after 50%
				complete: function(response) { // on complete
					output.html(response.responseText); //update element with received data
					myform.resetForm();  // reset form
					submitbutton.removeAttr('disabled'); //enable submit button
					progressbox.hide(); // hide progressbar
					alert("Data successfully saved!");

What is this codes below do?
Is this codes below necessary?
Can someone explain to me in detail please.

Thank you very much in advanced.