Cross-browser Custom File Input Plugin For jQuery
File Size: | 5.29 KB |
---|---|
Views Total: | 1592 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight and cross-browser jQuery custom file input plugin which replaces the default file input field with custom styles and file select button.
How to use it:
1. Add jQuery JavaScript library and the jQuery customFileInput.js to the web page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="js/customfileinput.js"></script>
2. Call the function customFileinput
on your HTML form which has file input field(s) as follows:
<form class="customfileinput"> <dl class="qiocform"> <dd> <span>Name</span> <label class="textfield"> <input type="text" name="name"> </label> </dd> <dd> <span>Email Address:</span> <label class="textfield"> <input type="text" name="email"> </label> </dd> <dd> <span>Phone Number :</span> <label class="textfield"> <input type="text" name="phone"> </label> </dd> <dd> <span>Upload Your Document :</span> <label> <input type="file" /> </label> </dd> <dd> <span>Upload Your Another Document:</span> <label> <input type="file" /> </label> </dd> <dd class="invisible"> <span>Invisible Object:</span> <label> <input type="file" /> </label> </dd> <dd> <span>Comment :</span> <label class="textfield"> <textarea name="massage" cols="5" rows="5"></textarea> </label> </dd> <dd class="submit clearfix"> <input type="submit" value="Submit" name="submit"> </dd> </dl> </form>
$('.customfileinput').customFileinput();
3. Apply you own CSS styles to the file input.
.customfile { position: relative; overflow: hidden; width: 230px; height: 26px; border: solid 0px red; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: solid 1px #c2c2c2; padding: 2px; -webkit-box-shadow: inset 1px 1px 2px #e4e4e4; box-shadow: inset 1px 1px 2px #e4e4e4; } .customfile span { display: block; float: left; } .customfile span.cust-field { line-height: 20px; padding: 3px 4px; width: 151px; height: 20px; cursor: pointer; color: #212121; display: block; font-weight: normal; color: #333; } .customfile span.cust-btn { float: right; line-height: 20px; padding: 1px 10px; height: 22px; text-align: center; font-weight: bold; cursor: pointer; color: #333; background: #e1e1e1; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-transform: uppercase; margin-top: 1px; } .customfile .fileinput { position: absolute; left: 0px; top: 0px; cursor: pointer; z-index: 99; }
4. Plugin's default options to customize the file input.
$('.customfileinput').customFileinput({ // button text buttontext : 'Send', // max width customboxwidth : '98%', // default CSS classes customboxclass : 'customfile', fileinputclass : 'fileinput' });
This awesome jQuery plugin is developed by bharatdangar. For more Advanced Usages, please check the demo page or visit the official website.