Fancy html file input customization using jquery fileStyle Plugin

142

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.

Social Media Auto Publish Powered By : XYZScripts.com