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.: Server-side validation is always required.
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…

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)
See this feature request for details

<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!'
  }
 });
});

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

Demo: http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples

Download: http://jquery-multifile-plugin.googlecode.com/svn/trunk/multiple-file-upload.zip

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

Related Listings:

1. Multiple file upload – Moo tools It’s about 18 months since I released my simple script...
2. Ajax File Upload using JQuery Script that simplifies how you traverse HTML documents, handle events, perform...
3. uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
4. Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...
5. New Fancy Upload version 2.0 Swiff meets Ajax for powerful and elegant uploads. FancyUpload is...

Do you like this post?

Email: