https://github.com/jpcaparas/jquery-custom-file-input
Stylize file input elements with jQuery. Adapted from http://goo.gl/myyz.
https://github.com/jpcaparas/jquery-custom-file-input
Last synced: 4 months ago
JSON representation
Stylize file input elements with jQuery. Adapted from http://goo.gl/myyz.
- Host: GitHub
- URL: https://github.com/jpcaparas/jquery-custom-file-input
- Owner: jpcaparas
- License: mit
- Created: 2014-10-02T04:19:58.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-10-04T05:43:05.000Z (almost 11 years ago)
- Last Synced: 2025-01-20T21:46:27.618Z (6 months ago)
- Language: JavaScript
- Size: 180 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery Custom File Input
## The `SI.Files` (the secondary dependency) for this plugin is wholly credited to [Shaun Inman](http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom)
## Overview
This jQuery plugin `(jquery.customFile.js)` allows you to overlay an element on top of an existing input field. The input field maintains zero opacity and mimics the dimensions of replacement element sitting on top of it.
* You can pass a jQuery element as (a) the first argument or (b) as a `replacement` object property
* The second argument is an (optional) callback function
## Example Usage
```javascript
(function($) {
// Create the replacement element to be overlayed on top of the file input button
var replacementElem = $('
')
.text("This is a DIV masquerading as a file upload button. Click it.")
.css({
background: '#ccc',
border: '1px solid #000',
display: 'block',
width: '200px',
padding: '3em',
background: '#f1f1f1',
cursor: "pointer"
});
// Call the "customFile" function passing a "replacement" property
// with the replacement element we've just created above.
$('#file').customFile(replacementElem);
}(jQuery));
```
## Known issues
* Passing in a `button` element suppresses the functionality of the file input element.