The file input plugin allows you to create a visually appealing file or image input widgets. This plugin is essential as it provide uniform look and feel to input[type="file"]
element in all browsers.
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
</div>
When uploading an image, it's possible to show a thumbnail instead of the filename.
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
Add .fileinput
to the container. Elements inside the container with .fileinput-new
and .fileinput-exists
are shown or hidden based on the current state. A preview of the selected file is placed
in .fileinput-preview
. The text of .fileinput-filename
gets set to the name of the selected file.
The file input widget should be placed in a regular <form>
replacing a standard <input type="file">
. The server side code should handle the file upload as normal.
Add data-provides="fileinput"
to the .fileinput
element. Implement a button to clear the file with data-dismiss="fileinput"
. Add data-trigger="fileinput"
to any element within the
.fileinput
widget to trigger the file dialog.
$('.fileinput').fileinput()
Using the given elements, you can layout the upload widget the way you want, either with a fixed width
and height
or with max-width
and max-height
.
Name | type | description |
---|---|---|
name | string | Use this option instead of setting the name attribute on the <input> element to prevent it from being part of the post data when not changed. |
Initializes a file upload widget.
Clear the selected file.
Reset the form element to the original value.
Event Type | Description |
---|---|
change.bs.fileinput | This event is fired after a file is selected. |
clear.bs.fileinput | This event is fired when the file input is cleared. |
reset.bs.fileinput | This event is fired when the file input is reset. |