A repository of over 1000 quality jQuery plugins

jQuery jQuery Enhancedfileinput

jQuery Enhancedfileinput is a jQuery Custom Styled plugin.

Created by Mparramont

A better HTML input for files, allowing custom styling and initial values.

Not what you're looking for? Click here to view more Custom Styled jQuery plugins

jQuery plugin to enhance the HTML file input. Use it to add styling, a custom button, or initial values to your file inputs.

View demo.

In your html:

<script type="text/javascript" src="src/jquery-enhancedfileinput.js"></script>
<input type="file" class='file_input' id='example_input'>

In your js:

options {
  'initial_value' : 'initial_file.jpg',
  'condition'     : function(initial_value){return true;},
  'html'          : "<img src='img/select.png'>"


Will create the following:

<div class="enhanced_file_input_wrapper" id="enhanced_file_input_wrapper_for_example_input" style="position: relative;">
    <input type="file" class="file_input" id="example_input" style="position: relative; opacity: 0; z-index: 2;">
    <div class="enhanced_input_container" style="position: absolute; top: 0px; left: 0px; z-index: 1;">
        <input id="enhanced_file_input_for_example_input_1" class="enhanced_file_input">
        <img src="img/select.png">

And look like this:

demo image

Inspired by quirksmode.org/dom/inputfile.html

You might also like these other Custom Styled jQuery Plugins

  • jQuery CustomSelect

    Lightweight, unobtrusive, custom style select boxes with jQuery

  • JQuery Custom Input

    Accessible, custom designed checkbox and radio button inputs styled with CSS (and a dash of jQuery)

  • Bpopup

    bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn't create or style your popup but provides you with all ...