05/10/2012

MooTools HTML5 Upload

<input type='file' name='afile' id='afile' />
<input type='button' id='subup' value='UPLOAD'>
<div id='progbar'>loading</div>
<div id='response'>response</div>

window.addEvent('domready', function(){
new NaMooUpload();
});

var NaMooUpload = new Class({
	initialize: function(){
		this.formData = new FormData();
		this.afile = 'afile';
		this.progbar = $('progbar');
		this.response = $('response');
		this.url = 'handle_file_upload.php';
		$('subup').addEvent('click',this.send.bind(this));
	},	

	send: function(){
		this.file = $(this.afile).files[0];
  		this.formData.append(this.afile,this.file);
		this.formData.append('username', 'Joe');
		this.xhr = new XMLHttpRequest();
		this.xhr.open('POST',this.url, true);
		this.xhr.upload.onprogress = this.onprogress.bind(this);
		this.xhr.onreadystatechange = this.onreadystatechange.bind(this);		
		this.xhr.send(this.formData );
	},	

	onprogress: function(e){
		var loaded = parseInt(e.loaded / e.total * 100, 10).limit(0, 100) + '%';
		this.progbar.set('text',loaded);
	},
	
	onreadystatechange: function(e){
		if (this.xhr.readyState == 4) {
			if (this.xhr.status == 200) {this.progbar.set('text','Transfer complete');this.response.set('text',this.xhr.responseText);}
			else {this.progbar.set('text','Error');}
		}
	} 
});

<?php
print_r($_FILES);
print_r($_REQUEST);
?>

Javascript - The onreadystatechange event , JavaScript Convert size in bytes

Related Posts