jquery.phile v1.0.2

jQuery.Phile Demo

Make file inputs styleable and more friendly for css

Usage

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. Include plugin's code:

   <script src='dist/jquery.phile.min.js'></script>

3. Call the plugin:

   $("input[type='file']").phile();

4. Add some css:

   .phile {
     ...
   }
   
   .phile .text {
     ...
   }
   
   .phile .button {
     ...
   }

Structure

The basic structure of the project is given in the following way:

├── demo/
│   └── index.html
├── dist/
│   ├── jquery.phile.js
│   └── jquery.phile.min.js
├── src/
│   └── jquery.phile.js
├── .gitignore
├── .jshintrc
├── Gulpfile.js
├── README.md
└── package.json

Options

wrapClass default: "phile"

Root wrapper class name. $("input").phile({ wrapClass: "customWrapClass" })

textClass default: "text"

Class name for fallback input text element. $("input").phile({ textClass: "customTextClass" })

buttonClass default: "button"

Class name for button. $("input").phile({ buttonClass: "customButtonClass" })

buttonText default: "Browse"

Custom text for button. $("input").phile({ buttonText: "chooseFile" })

placeholder default: ""

Custom placeholder for input text fallback: $("input").phile({ placeholder: "Choose file..." })

Also, you can specify the placeholder attribute for inputfile it will be used as default values automatically. <input type="file" placeholder="Choose file...">

reversed default: false

Swap order of text and button. $("input").phile({ reversed: true })

History

Check Releases for detailed changelog.

License

MIT License © Zeno Rocha