Jquery Multiple File Upload Name and Size Preview
jQuery MultiFile
The unopinionated mode to implement file selection.
What this is
This jQuery Multiple File Selection Plugin ($.MultiFile) is a non-obstrusive plugin for jQuery that helps users easily select multiple files for upload. Information technology lets you lot utilize some basic restrictions/validation then you lot tin can easily reject files before they're uploaded based on their extension or size before they're uploaded.
What this isn't
This is non a file upload tool. Uploading files require server-side integration and security considerations this project will never support. We tin recommend many, many, many peachy 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 take no idea what I'm talking nigh, then this plugin is not for you.
What'southward new?
A fresh start... ish : This projection started a a very long time ago... and information technology'due south been dormant since 2009! Support has been shockingly bad, we admit, but we would like to engage more than actively with our users and the jQuery community from now on. So as of April 2014, we've left Google Code backside and will be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow before long). We very much encourage and would dearest you lot all to report problems, contribue and discuss this project on GitHub.
Getting started
Just add the multi grade to your file input chemical element.
<input blazon="file" class="multi"/> Utilise the maxlength holding if y'all want to limit the number of files selected.
<input type="file" class="multi" maxlength="2"/> Use the accept belongings if y'all only want files of a certain extension to exist selected.
Separate valid extensions with a "|", similar this: "jpg|gif|png".
<input type="file" grade="multi" accept="gif|jpg"/> NB.: server-side validation is always required
Usage Examples
Using Attributes
The easiest style to get started is to add class="multi" and change the attributes of your element
Using the class property
There is a style to configure the plugin via the class property, without any knowledge of javascript
Selecting many files at in one case (HTML5)
And then far, each of the example higher up has merely enabled yous to select one file at a time. To select multiple files at once, just utilise HTML5's multiple aspect (1, 2)
Validating Sizes
It'south mutual to validate the size of the files being selected prior to upload.
With an Image Preview
There'due south an piece of cake way to add a preview of the image beingness uploaded
Advanced Examples
Of import: Don't use form="multi" if you utilise any of the examples below this bespeak.
If you utilise class="multi" the plugin will be initialised automatically (taking precedence over your code).
You must invoke the plugin with your ain selector when you use whatsoever of the examples below.
Something like
<input type="file" class="this-is-your-course" /> .
Followed by
// 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: ii, accept: 'jpg' }); }); Setting limit via script
<input multiple type="file" id="UpTo3Files"/> // wait for document to load $(office(){ // up to iii files can exist selected // invoke plugin $('#UpTo3Files').MultiFile(5); // if yous send in a number the plugin // volition treat it as the file limit }); Endeavor it:
Limit and Extension Filter
<input multiple type="file" id="UpTo3Images"/> // wait for document to load $(part(){ // up to 3 files can be selected // only images are allowed // invoke plugin $('#UpTo3Images').MultiFile({ max: 3, have: 'gif|jpg|png' }); }); Try it:
Multi-lingual support
<input multiple type="file" id="EmPortugues"/> // wait for document to load $(part(){ // utilize a different language // $file prints the file name // $ext prints the file extension // invoke plugin $('#EmPortugues').MultiFile({ max: 3, have: 'gif|jpg|png' STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!' } }); }); Endeavor it:
Moving the file list
This is div#T7-listing - selected files will be populated here...
Customising the file listing
Using events
The arguments passed on to each upshot handler are:
element: file element which triggered the event
value: the value of the chemical element in question
master_element: the original element containing all relevant settings
Selection events:
- onFileAppend
- afterFileAppend
- onFileSelect
- afterFileSelect
- onFileRemove
- afterFileRemove
Validation events:
- onFileDuplicate
- onFileInvalid
- onFileTooMany
- onFileTooBig
- onFileTooMuch
This is div#F9-Log - selected files volition be populated here...
Multi-lingual support
The plugin doesn't have any additional languages congenital-in, but it's very piece of cake 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 fault messages.
Method ane: Using class property (requires the MetaData plugin)
<input type="file" class="multi { take:'gif|jpg', max:3, STRING:{ remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', indistinguishable:'Arquivo ja selecionado:\n$file!' } }" /> Method two: Programatically by ID (ONE element just, does not require MetaData plugin)
<input type="file" id="PortugueseFileUpload" /> $(role(){ $('#PortugueseFileUpload').MultiFile({ accept:'gif|jpg', max:three, STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }); }); Method 3: Programatically ( north emlements, does not require MetaData plugin)
See this feature asking for details
<input type="file" form="multi-pt" /> <input type="file" class="multi-pt" /> <input type="file" form="multi-pt" /> $(role(){ $('.multi-pt').MultiFile({ have:'gif|jpg', max:three, STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }); }); Installation
Requirements
Y'all'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> The plugin
Either download the latest version and host information technology on your own server
<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script> OR if you lot like living on the border, hotlink the latest release straight from GitHub
<script src="//github.com/fyneworks/multifile/blob/master/jQuery.MultiFile.min.js" blazon="text/javascript" linguistic communication="javascript"></script> Support
We very much encourage and would love y'all all to report issues, contribue and discuss this project on GitHub.
There's besides a README.doctor for quick reference, if you're that way inclined.
This project started a a very long fourth dimension ago... and information technology's been dormant since 2009! Support has been shockingly bad, we admit, only we would like to engage more actively with our users and the jQuery community from at present on. And then equally of April 2014, we've left Google Lawmaking backside and will be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow soon).
Credit where it'southward due!
- Fyneworks.com professional web design and google SEO experts
- Dean Edwards - Writer of JS Packer used to compress the plugin
- Adrian Wróbel - Fixed a nasty bug then the script could work perfectly in Opera
- Jonas Wagner - Modified plugin and so newly created elements are an exact copy of the original element (ie.: persists attributes)
- Mike Alsup - Writer of several jQuery Plugins...
- Suggested solution to chemical element naming convention / server-side handling
- Form plugin - Used to submit forms via ajax
- blockUI plugin - Used to show pretty fault messages
- Julien Phalip - Identified conflict with variable name 'course' in several methods
License Info
| 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 utilize, re-create, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to practise so, subject to the post-obit conditions: The to a higher place copyright observe 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 Whatever 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 Connexion WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | |
starksmadentopere.blogspot.com
Source: http://lampspw.wallonie.be/dgo4/tinymvc/myfiles/plugins/multifile-2.2.1/docs.html
0 Response to "Jquery Multiple File Upload Name and Size Preview"
Enregistrer un commentaire