Html File Upload Clear Content Usnig Jquery
jQuery MultiFile
The unopinionated manner to implement file selection.
What this is
This jQuery Multiple File Selection Plugin ($.MultiFile) is a not-obstrusive plugin for jQuery that helps users hands select multiple files for upload. It lets you apply some bones restrictions/validation so you can hands reject files earlier they're uploaded based on their extension or size earlier they're uploaded.
What this isn't
This is not a file upload tool. Uploading files require server-side integration and security considerations this project will never back up. We tin recommend many, many, many peachy tools if you're looking for a complete upload solution. But if you lot don't already manage your own server-side integration, or if you have no idea what I'm talking nearly, so this plugin is not for y'all.
What's new?
A fresh start... ish : This project started a a very long fourth dimension agone... and it's been fallow since 2009! Back up has been shockingly bad, we acknowledge, merely nosotros would similar to engage more actively with our users and the jQuery community from now on. So every bit of April 2014, we've left Google Code behind and volition be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow presently). We very much encourage and would dear you all to report problems, contribue and discuss this project on GitHub.
Getting started
But add together the multi grade to your file input chemical element.
<input type="file" class="multi"/> Use the maxlength property if y'all desire to limit the number of files selected.
<input type="file" class="multi" maxlength="2"/> Use the take holding if you only want files of a certain extension to exist selected.
Separate valid extensions with a "|", like this: "jpg|gif|png".
<input type="file" class="multi" accept="gif|jpg"/> NB.: server-side validation is always required
Usage Examples
Using Attributes
The easiest mode to get started is to add class="multi" and modify the attributes of your chemical element
Using the class property
There is a way to configure the plugin via the class belongings, without any cognition of javascript
Selecting many files at one time (HTML5)
Then far, each of the example in a higher place has but enabled y'all to select ane file at a time. To select multiple files at in one case, just utilise HTML5's multiple attribute (1, 2)
Validating Sizes
It'south common to validate the size of the files beingness selected prior to upload.
With an Image Preview
There's an easy way to add a preview of the image being uploaded
Advanced Examples
IMPORTANT: Don't utilise class="multi" if you utilise whatsoever of the examples below this point.
If you utilize course="multi" the plugin will exist initialised automatically (taking precedence over your code).
You must invoke the plugin with your own selector when yous use any of the examples beneath.
Something like
<input type="file" class="this-is-your-class" /> .
Followed past
// this is your code $(function(){ // await for page to load // this is your selector $('input.this-is-your-class').MultiFile({ // your options go here max: 2, have: 'jpg|png|gif' }); }); Setting limit via script
<input multiple type="file" id="UpTo3Files"/> // wait for document to load $(function(){ // upwardly to 3 files can be selected // invoke plugin $('#UpTo3Files').MultiFile(5); // if you ship in a number the plugin // will care for it as the file limit }); Attempt it:
Limit and Extension Filter
<input multiple type="file" id="UpTo3Images"/> // wait for document to load $(function(){ // upwardly to 3 files can exist selected // only images are allowed // invoke plugin $('#UpTo3Images').MultiFile({ max: 3, take: 'gif|jpg|png' }); }); Try it:
Multi-lingual support
<input multiple type="file" id="EmPortugues"/> // await for document to load $(part(){ // utilize a dissimilar language // $file prints the file proper name // $ext prints the file extension // invoke plugin $('#EmPortugues').MultiFile({ max: three, accept: 'gif|jpg|png' Cord: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!' } }); }); Endeavour it:
Moving the file list
This is div#T7-list - selected files will be populated here...
Customising the file list
Using events
The arguments passed on to each consequence handler are:
chemical element: file element which triggered the event
value: the value of the element in question
master_element: the original chemical element containing all relevant settings
Option 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 boosted languages built-in, just 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 take gif/pg files merely in order to demonstrate the fault messages.
Method 1: Using class property (requires the MetaData plugin)
<input type="file" class="multi { take:'gif|jpg', max:three, String:{ remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }" /> Method ii: Programatically by ID (One element only, does not require MetaData plugin)
<input type="file" id="PortugueseFileUpload" /> $(role(){ $('#PortugueseFileUpload').MultiFile({ accept:'gif|jpg', max:3, Cord: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\north$file!' } }); }); Method iii: Programatically ( n emlements, does not require MetaData plugin)
See this feature asking for details
<input type="file" class="multi-pt" /> <input blazon="file" class="multi-pt" /> <input type="file" class="multi-pt" /> $(function(){ $('.multi-pt').MultiFile({ accept:'gif|jpg', max:three, STRING: { remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!' } }); }); Installation
Requirements
You'll need jQuery, we recommend using Google Hosted Libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/one.11.0/jquery.min.js" blazon="text/javascript" language="javascript"></script> The plugin
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 lot like living on the edge, hotlink the latest release directly from GitHub
<script src="//github.com/fyneworks/multifile/blob/primary/jQuery.MultiFile.min.js" type="text/javascript" language="javascript"></script> Support
We very much encourage and would love yous all to report issues, contribue and discuss this projection on GitHub.
There's also a README.doc for quick reference, if you lot're that way inclined.
This project started a a very long time ago... and it'due south been dormant since 2009! Back up has been shockingly bad, we acknowledge, but we would like to engage more than actively with our users and the jQuery community from now on. And so as of April 2014, we've left Google Code behind and volition be starting a fresh project on GitHub. Our other projects (Star Rating & CKEditor will follow soon).
Credit where it's due!
- Fyneworks.com professional person spider web design and google SEO experts
- Dean Edwards - Author of JS Packer used to shrink the plugin
- Adrian Wróbel - Fixed a nasty bug and so the script could work perfectly in Opera
- Jonas Wagner - Modified plugin so newly created elements are an exact copy of the original chemical element (ie.: persists attributes)
- Mike Alsup - Writer 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 evidence pretty mistake messages
- Julien Phalip - Identified disharmonize with variable proper noun 'class' in several methods
License Info
| Multiple File Choice Plugin past Fyneworks.com is licensed, every bit jQuery is, under the MIT License. |  |
Copyright © 2008 Fyneworks.com Permission is hereby granted, gratis of charge, to whatever person obtaining a re-create of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to utilise, re-create, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to let persons to whom the Software is furnished to do so, subject field to the following conditions: The above 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 ANY KIND, EXPRESS OR Implied, INCLUDING BUT Non 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 Merits, Amercement 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. | |
Source: http://kp.bkd.sidoarjokab.go.id/website/lib/multifile-master/docs.html
Belum ada Komentar untuk "Html File Upload Clear Content Usnig Jquery"
Posting Komentar