Multiple File Upload plugin for jQuery - v1.25

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

Previous versions: 1.00, 1.10, 1.20, 1.23, 1.24

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

Uploading files - The server-side script

Javascript cannot be used to upload files - this plugin will only go as far as helping the user select the files to upload. When the form is submitted, it's up to you to have a server-side script that will actually upload the files. Please do not email me asking how this can be done!!! There is plenty of information out there and you can easily find it on Google. But because I'm such a nice guy, I've put a quick list of the best links here:

ASP users:
FreeASPUpload - Free, easy to use and no component required. This is my favourite.

PHP users:
See File Upload Tutorials from W3CSchools, About.com, Tizag

Known Bugs: Grrrrrr!!!

See Issues for Multiple File Upload

Fixed Bugs: Yay!!!

• 2008-Jan-14: BUG 1251 (details)
  Conflicting IDs on multiple instances of the MultiFile plugin
• Wrong parameters sent to event handlers:
  This was an oversight - plugin was sending the wrong parameters to event handlers.
  Problem is now fixed.
• 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?

2008-Jan-10: Renamed variables, using meaningful names inatead of single letters

• Pro: The code is now easier to read/understand
• Con: The plugin is a little bigger (a few bytes)

2007-July: Added file extension validation.

• Usage: class="multi accept-jpg|gif|png"
• Note: You must ALWAYS validate submitted information on the server...

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

2007-May: 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

Please report issues on the official project page: Issues for Multiple File Upload

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)