jQuery File Input Replacement Plugin with Image Preview - File Picker

File Picker is a jQuery plugin for file upload control that allows you to style the default file input with Bootstrap, jQuery UI or custom CSS styles. The plugin also has the ability to display a preview of picked images attaching to the file input.

You might also like:

• jQuery Plugin For Drag and Drop File Input Field - ezdz
• Pretty Input Type=File Replacement with jQuery - FileInput
• Styling Your File Input with jQuery Inputfile Plugin and Bootstrap
• Nice jQuery Html File Input Field Plugin - Nice File Input
• Simple HTML File Input Enhancement Plugin - enhancedfileinput

Basic Usage:

1. Include the jQuery javascript library and jQuery file picker plugin in the page.

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

2. Choose a framework/CSS to style your file input

<!-- Bootstrap 3 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- jQuery UI -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">

<!-- Default Style -->
<link href="src/css/filepicker.default.css" rel="stylesheet">

3. Create a file input filed in the page.

<input data-label="Upload" class="demo" type="file" multiple/>

4. Initialize the plugin with options.

<script>
$(document).ready(function() {
$("input[type='file'].demo").filepicker({
style: 'bootstrap' // default, bootstrap or jquery-ui
});
});
</script>

5. The sample CSS to style the image preview.

.filepicker-preview .thumbnail {
...
}
.filepicker-preview .thumbnail img {
...
}

Change log:

2014-05-28

• added renderUI- and renderThumbnail-callbacks

---

This awesome jQuery plugin is developed by benignware. For more Advanced Usages, please check the demo page or visit the official website.