norfish · May 21, 2014 04:22 · Nov 6, 2011
diff --git a/File.Upload.js b/File.Upload.js
@@ -0,0 +1,117 @@
+/*
+
+name: [File.Upload, Request.File]
+description: Ajax file upload with MooTools.
+license: MIT-style license
+author: Matthew Loberg
+requires: [Request]
+provides: [File.Upload, Request.File]
+credits: Based off of MooTools-Form-Upload (https://github.com/arian/mootools-form-upload/) by Arian Stolwijk
+
+*/
+
+File.Upload = new Class({
+
+	Implements: [Options, Events],
+
+	options: {
+		onComplete: function(){}
+	},
+
+	initialize: function(options){
+		var self = this;
+		this.setOptions(options);
+		this.uploadReq = new Request.File({
+			onComplete: function(){
+				self.fireEvent('complete', arguments);
+				this.reset();
+			}
+		});
+		if(this.options.data) this.data(this.options.data);
+		if(this.options.images) this.addMultiple(this.options.images);
+	},
+
+	data: function(data){
+		var self = this;
+		if(this.options.url.indexOf('?') < 0) this.options.url += '?';
+		Object.each(data, function(value, key){
+			if(self.options.url.charAt(self.options.url.length - 1) != '?') self.options.url += '&';
+			self.options.url += encodeURIComponent(key) + '=' + encodeURIComponent(value);
+		});
+	},
+
+	addMultiple: function(inputs){
+		var self = this;
+		inputs.each(function(input){
+			self.add(input);
+		});
+	},
+
+	add: function(input){
+		var input = document.id(input),
+			name = input.get('name'),
+			file = input.files[0];
+		this.uploadReq.append(name, file);
+	},
+
+	send: function(input){
+		if(input) this.add(input);
+		this.uploadReq.send({
+			url: this.options.url
+		});
+	}
+
+});
+
+Request.File = new Class({
+
+	Extends: Request,
+
+	options: {
+		emulation: false,
+		urlEncoded: false
+	},
+
+	initialize: function(options){
+		this.xhr = new Browser.Request();
+		this.formData = new FormData();
+		this.setOptions(options);
+		this.headers = this.options.headers;
+	},
+
+	append: function(key, value){
+		this.formData.append(key, value);
+		return this.formData;
+	},
+
+	reset: function(){
+		this.formData = new FormData();
+	},
+
+	send: function(options){
+		var url = options.url || this.options.url;
+
+		this.options.isSuccess = this.options.isSuccess || this.isSuccess;
+		this.running = true;
+
+		var xhr = this.xhr;
+		xhr.open('POST', url, true);
+		xhr.onreadystatechange = this.onStateChange.bind(this);
+
+		Object.each(this.headers, function(value, key){
+			try{
+				xhr.setRequestHeader(key, value);
+			}catch(e){
+				this.fireEvent('exception', [key, value]);
+			}
+		}, this);
+
+		this.fireEvent('request');
+		xhr.send(this.formData);
+
+		if(!this.options.async) this.onStateChange();
+		if(this.options.timeout) this.timer = this.timeout.delay(this.options.timeout, this);
+		return this;
+	}
+
+});
diff --git a/example.html b/example.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>Ajax File Upload</title>
+	<!--[if lt IE 9]>
+		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->
+</head>
+<body>
+<div id="wrapper">
+	<input type="file" name="image" id="image" /><br />
+	<input type="file" name="image2" id="image2" /><br />
+	<button type="button" id="btn">Upload</button>
+</div>
+<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
+<script src="File.Upload.js"></script>
+<script>
+window.addEvent('domready', function(){
+	$("btn").addEvent('click', function(){
+		var upload = new File.Upload({
+			url: 'upload.php',
+			data: {
+				foo: 'bar'
+			},
+			images: ['image', 'image2'],
+			onComplete: function(response){
+				console.log(response);
+			}
+		});
+
+		upload.send();
+	});
+});
+</script>
+</body>
+</html>
diff --git a/upload.php b/upload.php
@@ -0,0 +1,4 @@
+<?php
+
+print_r($_GET); // data is store in get
+print_r($_FILES); // our images