Multiple file upload – Moo tools

alyaspk — Fri, 08 May 2009 17:51:03 +0000

It’s about 18 months since I released my simple script for creating a prettier way to include multiple file elements on a page. In that time it has remained by far the most popular page on this site, in spite of the fact that I haven’t updated it since and have long since given up trying to keep up with the comments it still generates.

Anyway as a way of getting to know Mootools, I decided to rewrite it to take advantage of the framework. I took the opportunity to clean up the code a bit and make it easier to style the output.

You can find a zip file for MooTools version 1.2 here (included is another zip file with the old, MooTools v1.1 compatible code) with the full annotated source code, also a compressed version (it weighs in at just 2.5K), some simple CSS, an example HTML file and a readme (which is basically identical to the extended comments at the top of the source code).

Demo: http://the-stickman.com/files/mootools/multiupload/

Download: http://the-stickman.com/files/mootools/multiupload/Stickman.MultiUpload.zip

Source: http://the-stickman.com/web-development/javascript/multiple-file-uploader-mootools-version/

Related Listings:

uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
TimeSpinner : Moo Tools Welcome to this temporary/permanent page. Temporary because is really ugly,...
Featured articles plugin for Wordpress with Moo Tools Featured articles gives the wordpress blog admin the possibility to...

AJAX file upload Script

alyaspk — Thu, 26 Feb 2009 15:46:54 +0000

Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code.

You need to create a form with file fields you wish to upload and define “onsubmit” event. Look at the example below how to do that.

Tested in IE5.5+, FF1.0+, OP 8.0+

Source code for index.html


	Iframe Ajax
	
	



	
		Name: 
		File: 
		
	

	

	# of submited forms: 0
	last submit response (generated by form action - index.php file):

Java Source Code:

AIM = {

	frame : function(c) {

		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '';
		document.body.appendChild(d);

		var i = document.getElementById(n);
		if (c && typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}

		return n;
	},

	form : function(f, name) {
		f.setAttribute('target', name);
	},

	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c && typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},

	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}

		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}

}

Demo: http://www.webtoolkit.info/demo/javascript/aim/demo.html

Source:http://www.webtoolkit.info/ajax-file-upload.html

Related Listings:

Asynchronous upload – Like AJAX Here a simple function to asynchronous upload using iframe. Dont...
uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...

Ajax Updates » file uploader

Multiple file upload – Moo tools

AJAX file upload Script