jQuery Multiple File Upload Plugin

What is this?

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

How do I use it?

Just add the multi class to your file input element.

<input type="file" class="multi"/>

Use the maxlength property if you want to limit the number of files selected

<input type="file" class="multi" maxlength="2"/>

Use the accept property if you only want files of a certain extension to be selected (separate valid extensions with a "|").

<input type="file" class="multi" accept="gif|jpg"/>

PS.: Sever-side validation is always required.

Advanced Usage

Using your own selectors

$(function(){ // wait for document to load
  $('#MyFileUpload').MultiFile();
 });

Setting limit via script

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

Advanced configuration

$(function(){ // wait for document to load
  $('#MyCoolFileUpload').MultiFile({
   max: 5,
   accept: 'gif,jpg,png,bmp,swf'
  });
 });

Using events

$(function(){ // wait for document to load
  $.MultiFile({
   afterFileSelect:function(element,value,master){
    alert('File selected:\n'+value);
   }
  });
 });

Customising visible strings for multi-lingual support

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

Basic Examples

Using class property

Multi-lingual support

The plugin doesn't have any additional languages built-in, but it's very easy to customise the messages to any language of your choosing. See the examples below...

NB.: This example has been configured to accept gif/pg files only in order to demonstrate the error messages.

Method 1: Using class property (require MetaData plugin)

<input type="file" class="multi
 {accept:'gif|jpg', max:3, STRING:{
  remove:'Remover',
  selected:'Selecionado: $file',
  denied:'Invalido arquivo de tipo $ext!',
  duplicate:'Arquivo ja selecionado:\n$file!'
 }}" />

Method 2: Programatically by ID (ONE element only, does not require MetaData plugin)

<input type="file" id="PortugueseFileUpload" />

$(function(){
  $('#PortugueseFileUpload').MultiFile({
   accept:'gif|jpg', max:3, STRING: {
    remove:'Remover',
    selected:'Selecionado: $file',
    denied:'Invalido arquivo de tipo $ext!',
    duplicate:'Arquivo ja selecionado:\n$file!'
   }
  });
 });

Method 3: Programatically (n elements, does not require MetaData plugin)

<input type="file" class="multi-pt" />
<input type="file" class="multi-pt" />
<input type="file" class="multi-pt" />

$(function(){
 $('.multi-pt').MultiFile({
  accept:'gif|jpg', max:3, STRING: {
   remove:'Remover',
   selected:'Selecionado: $file',
   denied:'Invalido arquivo de tipo $ext!',
   duplicate:'Arquivo ja selecionado:\n$file!'
  }
 });
});

Can this plugin upload files?

No, this jQuery plugin does not upload files

Javascript is a client side language and cannot upload files - this plugin will only go as far as helping the user select the files to upload and assisting in the validation process by warning the user of common mistakes before server-side validation takes place. 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 to do this!!! 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

NOTICE TO PHP USERS: The plugin's default behaviour generates an array of elements (sharing the same name). In order for this array to be properly identified and handled in PHP, you have add "[]" to name of your element.
eg.: <input type="file" name="MyStuff[]"...

Download

Package:	v1.29 multiple-file-upload.zip previous versions 1.00, 1.10, 1.20, 1.23, 1.24, 1.25, 1.26, 1.27, 1.28
Files:	These are the individual required files (already included in the zip package above) jQuery.MultiFile.js (packed version: jQuery.MultiFile.pack.js)
jQuery:	jquery-latest.js (see jQuery.com)
Related:	Metadata plugin - Used to retrieve inline configuration from class variable blockUI plugin - Used to show pretty error messages Form plugin - Used to submit forms via ajax

Installation

Required Files

<script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
    

Optional Files

Metadata Plugin
This great plugin can be used to configure the plugin via the class parameter.
You can also download the version being used on this page

BlockUI Plugin
Used to show 'pretty' error messages, instead of the browser's alert() function.
You can also download the version being used on this page

Form Plugin
Used to submit forms via Ajax.

Support

Quick Support Links: Help me! | Report a bug | Suggest new feature

Support for this plugin is available through the jQuery Mailing List. This is a very active list to which many jQuery developers and users subscribe.
Access to the jQuery Mailing List is also available through the Nabble Forums, the jQuery Google Group and the official project page.

Credit

• Diego A. - Author, Professional Web Design London
• Dean Edwards - Author of JS Packer used to compress the plugin
• Adrian Wróbel - Fixed a nasty bug so the script could work perfectly in Opera
• Jonas Wagner - Modified plugin so newly created elements are an exact copy of the original element (ie.: persists attributes)
• Mike Alsup - Author of several jQuery Plugins...
  • Suggested solution to element naming convention / server-side handling
  • Form plugin - Used to submit forms via ajax
  • blockUI plugin - Used to show pretty error messages
• Julien Phalip - Identified conflict with variable name 'class' in several methods

Attribute this work

License Info

Multiple File Upload Plugin by Fyneworks.com is licensed under the MIT License and the GPL License.

Copyright (c) 2008 Fyneworks.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.