JavaScript

var file = this.files[0];

function uploadImage(){
			$('#percent').progressbar({
				value: 0
			});
			$( "#dialog" ).dialog({
			resizable: false,
			height:150,
			modal: true,
			buttons: {
				Cancel: function() {
					if (xhr){
						xhr.abort();
						xhr = null;
					}
					$( this ).dialog( "close" );
				}
			}
			});
			document.getElementById('photo').addEventListener('change', function(e) {
				var file = this.files[0];
				var formdata = new FormData();
				formdata.append('file', file);
				xhr = new XMLHttpRequest();
				xhr.file = file; 
				xhr.addEventListener('progress', function(e) {
					var done = e.position || e.loaded, total = e.totalSize || e.total;
					$('#percent').progressbar('value', (Math.floor(done/total*1000)/10));
				}, false);
				if ( xhr.upload ) {
					xhr.upload.onprogress = function(e) {
						var done = e.position || e.loaded, total = e.totalSize || e.total;
						$('#percent').progressbar('value', (Math.floor(done/total*1000)/10));

					};
				}
				xhr.onreadystatechange = function(e) {
					if ( 4 == this.readyState ) {
						console.log(this);
						$('#src').val(this.responseText);
						$('#dialog').dialog('close');
						xhr = null;
					}
				};
				xhr.open('post', '/index/fileupload', true);
				xhr.send(formdata);
			}, false);
		}