Fancy html file input customization using jquery fileStyle Plugin
Integrate Fancy html file input on your website
Libraries
Include the fileStyle minified CSS jquery-filestyle.min.css and JS jquery-filestyle.min.js file on page don’t forget to include latest jquery library before fileStyle JS.
<!--CSS--> <link href="jquery-filestyle.min.css" rel="stylesheet" /> <!--JS--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-filestyle.min.js"></script> |
HTML
Create Plain fancy HTML file input element by simply calling jfilestyle() plugin function on page.
<input type="file" name="test" id="fileInput">
<script>
$(function() { $('#fileInput').jfilestyle() });
</script>
|
You can customize your HTML file input element by tow method 1). Using data attribute 2). Jquery function.
Customizing html file input using html data attribute.
<input type="file" class="fileInput"
data-buttonText="Find"
data-input="false"
data-size="200px"
|
Customizing html file input via jquery plugin function
<script>
$(function() {
$('.fileInput').jfilestyle({
// button text
'text': 'Choose file',
// shows input field
'input': true,
// is disabled?
'disabled': false,
// where to place the button
'buttonBefore': false,
// input size
'inputSize': '200px',
// custom placeholder
'placeholder': '',
// enable drag and drop
'dragdrop': true,
// callback
'onChange': function () {}
})
});
</script>
|
See live demo and download source code.
DEMO | DOWNLOAD
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.
