v1.29 - http://www.fyneworks.com/jquery/multiple-file-upload/

v1.24 - http://www.fyneworks.com/jquery/multiple-file-upload/
Details:
- 2 bug fixes

See http://www.fyneworks.com/jquery/multiple-file-upload/

Known Bugs: Grrrrrr!!!

• None at present...

Fixed Bugs: Yay!!!

• IE6/7, Extension validation:
  
  Error message is displayed but plugin fails to clear the invalid value.
  

This causes the invalid value to be submitted with the form.

Changes: What's new?

Added file extension validation.

• Usage: class="multi accept-jpg|gif|png"

Added multi-lingual support.
Works via class string with MetaData plugin.

• Method 1: Using class property (and MetaData plugin)
  

class="multi {STRING: {remove:'Remover',selected:'Selecionado: $file',denied:'Invalido arquivo de tipo $ext!'}}"

Added events easier customization, triggered in the following order.

1. When a file is selected:

• onFileSelect: when user selects a file. Return false to stop event.
• onFileAppend: file has been accepted, about to update DOM
• afterFileAppend: self explanatory...
• afterFileSelect: self explanatory...

• onFileRemove: about to remove file element from DOM. Return false to stop event.
• afterFileRemove: just removed file element from DOM

Installation: Piece o'cake!

Just add jQuery and
the jQuery Multiple File Upload
plugin to the head section of your page.

Download: Get the good stuff...

Full version, with useless comments: jQuery Multiple File Upload


Compressed version, only 3kb: jQuery Multiple File Upload Compressed


jQuery: See jQuery's Official Website

Basic Usage: Get the job done...

Just add multi
to the class property of your file input element
and the script will do the rest.

Add limit-99 or max-99
to the class property of your file input element
to set the maximum number of files that can be selected.

Add accept-ext1|ext2|ext3

to the class property of your file input element
to limit allowed extensions.

Add debug
to the class property of your file input element
to see it working in debug mode.

Advanced Usage: Knock yourself out!

Default usage:

$(function(){ $.MultiFile(); });


Using your own selectors:

$(function(){ $('#MyFileUpload').MultiFile(); });


Setting limit via script:

$(function(){ $('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/); });


Advanced configuration:

$(function(){
$('#MyCoolFileUpload').MultiFile({
max: 5,
accept: 'gif,jpg,png,bmp,swf'
});
});

Using events:

$(function(){
$.MultiFile({
afterFileSelect:function(element,value,master){
alert('File selected:\n'+value);
}
});
});

Customizing visible strings for multi-lingual support:

$(function(){
$('#PortugueseFileUpload').MultiFile({
STRING: {
remove:'Remover',
selected:'Selecionado: $file',
denied:'Invalido arquivo de tipo $ext!'
}
});
});

What's next? Suggestions and feature requests...

Not sure... you tell me

Please post suggestions and feedback in the Discussion Forum

Credits Where credit is due

• Diego A. - Author, Professional Web Design London
• Dean Edwards - Author of JS Packer used to compress the plugin
• Adrian Wróbel - Fixed bug so the script works perfectly in Opera

Multiple File Upload plugin source v1.1 - COMPRESSED, no comments

Multiple File Upload plugin source v1.1 - full, with comments

Multiple File Upload plugin source - COMPRESSED, no comments

Multiple File Upload plugin source code with comments