-
-
Save fheyer/2982788 to your computer and use it in GitHub Desktop.
MooTools Ajax File Upload (backport to mootools 1.2.5)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; | |
| $each(data, function(value, key){ | |
| self.uploadReq.append(key, 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); | |
| $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; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| print_r($_GET); // data is store in get | |
| print_r($_FILES); // our images |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Changes: