jQuery File Input Replacement Plugin with Image Preview - File Picker

jQuery File Input Replacement Plugin with Image Preview - File Picker
File Size: 22.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.