File upload progress issue.

[ziggyfish]

Hi,

In firefox, and chrome, I have a progress bar when someone uploads a file, however the same code doesn't work in IE (surprise surprise), it fails on:

var file = this.files[0];

My question is how do I do the equivalent for IE? Pointing me to the documentation would best.

code is:

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);
		}

[holyhttp]

Which versions of IE did you tried with.
The addEventListener does not work in IE8 and earlier versions.

Try:

if(document.addEventListener){
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);
}
else {
xhr.attachEvent('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$('#percent').progressbar('value', (Math.floor(done/total*1000)/10));
});

}


Do the same for
document.getElementById('photo').addEventListener('change', ....