Multiple File Upload plugin for jQuery - v1.2

jQuery.MultiFile is a plugin for jQuery to help users easily select multiple files for upload in a concise quick and easy manner.

This is an archived copy of this plugin, click here for the latest version

Version: 1.2 | Download | Discussion Forum | Blog

Previous versions: 1.00, 1.10

Examples: Try it yourself!

The plugin provides very simple integration in 2 methods:
a) By using the accept and maxlength properties.
b) By using the class property
Take a look at the examples below and decide which method is best for you.

Using accept and maxlength properties

Example 1


       class="multi" maxlength="5"

Limit: 5 files.
Allowed extensions: any.

Example 2


       class="multi" accept="gif|jpg"

Limit: no limit.
Allowed extensions: gif and jpg.

Example 3


       class="multi" accept="gif|jpg" maxlength="3"

Limit: 3 files
Allowed extensions: gif and jpg.

Note that server-side validation is still required if Javascript is disabled.

Using class property

Example 4


       class="multi"

No limit.
Allowed extensions: any.

Example 5


       class="multi limit-2"

Limit: 2 files.
Allowed extensions: any.

Example 6


       class="multi limit-3 accept-jpg|gif|bmp|png"

Limit: 3 files
Allowed extensions: jpg,gif,bmp,png.

Note that server-side validation is still required if Javascript is disabled.

Multi-lingual support

Example 7

This example requires the MetaData plugin.
Here's is how you'd use the MetaData plugin to configure this plugin in more detail.
You can even change the language of the plugin by customizing the STRING object.


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

No limit

Known Bugs: Grrrrrr!!!

Opera/Safari, 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.

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"
Note: You must ALWAYS validate submitted information on the server...

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!'}}"

Method 2: Programatically (without MetaData plugin)

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

Added events easier customization, triggered in the following order.

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...
When a file is removed:
- 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 2.54kb: 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 Designer London
Dean Edwards - Author of JS Packer used to compress the plugin