Multiple File Upload plugin for jQuery - v1.1

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

Changes: What's new?

Added file extension validation.

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

Just add jQuery and the jQuery Multiple File Upload plugin to the head section of your page.

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.

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*/); });

Using events:

$(function(){
 $.MultiFile({
  afterFileSelect:function(element,value,master){
   alert('File selected:\n'+value);
  }
 });
});

Not sure... you tell me

Please post suggestions and feedback in the Discussion Forum

Example 1


       class="multi"

No limit

Example 2


       class="multi limit-3"

Limit: 3 files only!

Example 3


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

Limit: 3 files only!
Allowed extensions: jpg,gif,bmp,png

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