The unopinionated way to implement file selection.
This
jQuery Multiple File Selection Plugin
($.MultiFile
) is a non-obstrusive plugin for jQuery
that helps users easily
select multiple files for upload. It lets you apply some basic restrictions/validation so you can easily
reject files before they're uploaded based on their extension or size
before they're uploaded.
This is not a file upload tool. Uploading files require server-side integration and security considerations this project will never support. We can recommend many, many, many great tools if you're looking for a complete upload solution. But if you don't already manage your own server-side integration, or if you have no idea what I'm talking about, then this plugin is not for you.
A fresh start... ish : This project started a a very long time ago... and it's been dormant since 2009! Support has been shockingly bad, we admit, but we would like to engage more actively with our users and the jQuery community from now on. So as of April 2014, we've left Google Code behind and will be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow shortly). We very much encourage and would love you all to report issues, contribue and discuss this project on GitHub.
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 "|", like this: "jpg|gif|png".
<input type="file" class="multi" accept="gif|jpg"/>
The easiest way to get started is to add class="multi"
and modify the attributes of your element
class
propertyThere is a way to configure the plugin via the class
property, without any knowledge of javascript
It's common to validate the size of the files being selected prior to upload.
There's an easy way to add a preview of the image being uploaded
class="multi"
if you use any of the examples below this point.
If you use class="multi"
the plugin will be initialised automatically
(taking precedence over your code).
You must invoke the plugin with your own selector when you use any of the examples below.
<input type="file" class="this-is-your-class" />
.
// this is your code
$(function(){ // wait for page to load
// this is your selector
$('input.this-is-your-class').MultiFile({
// your options go here
max: 2,
accept: 'jpg'
});
});
<input multiple type="file" id="UpTo3Files"/>
// wait for document to load
$(function(){
// up to 3 files can be selected
// invoke plugin
$('#UpTo3Files').MultiFile(5);
// if you send in a number the plugin
// will treat it as the file limit
});
<input multiple type="file" id="UpTo3Images"/>
// wait for document to load
$(function(){
// up to 3 files can be selected
// only images are allowed
// invoke plugin
$('#UpTo3Images').MultiFile({
max: 3,
accept: 'gif|jpg|png'
});
});
<input multiple type="file" id="EmPortugues"/>
// wait for document to load
$(function(){
// use a different language
// $file prints the file name
// $ext prints the file extension
// invoke plugin
$('#EmPortugues').MultiFile({
max: 3,
accept: 'gif|jpg|png'
STRING: {
remove:'Remover',
selected:'Selecionado: $file',
denied:'Invalido arquivo de tipo $ext!'
}
});
});
The arguments passed on to each event handler are:
element: file element which triggered the event
value: the value of the element in question
master_element: the original element containing all relevant settings
Selection events:
Validation events:
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.
<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!'
}
}"
/>
<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!'
}
});
});
<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!'
}
});
});
You'll need jQuery, we recommend using Google Hosted Libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" language="javascript"></script>
Either download the latest version and host it on your own server
<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
OR if you like living on the edge, hotlink the latest release directly from GitHub
<script src="//github.com/fyneworks/multifile/blob/master/jQuery.MultiFile.min.js" type="text/javascript" language="javascript"></script>
We very much encourage and would love you all to report issues, contribue and discuss this project on GitHub.
There's also a README.md for quick reference, if you're that way inclined.
This project started a a very long time ago... and it's been dormant since 2009! Support has been shockingly bad, we admit, but we would like to engage more actively with our users and the jQuery community from now on. So as of April 2014, we've left Google Code behind and will be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow shortly).
Multiple File Selection Plugin by Fyneworks.com is licensed, as jQuery is, under the MIT License. | |
Copyright © 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. |