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);}}}});
<?phpprint_r($_FILES);print_r($_REQUEST);?>

Related Posts

Javascript - The onreadystatechange event, JavaScript Convert size in bytes