Multiple File Upload plugin for jQuery - v1.23

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.23 | Download | Discussion Forum | Blog

Previous versions: 1.00, 1.10, 1.20

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

Using class property

Multi-lingual support

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.
• 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.
  Thanks to Adrian Wróbel (adrian [dot] wrobel [at] gmail.com).

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.

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...
2. 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 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
• Jonas Wagner - Modified plugin so newly created elements are an exact copy of the original element (ie.: persists attributes)