|
@@ -9,9 +9,11 @@ bootstrap-fileinput
|
|
|
|
|
|
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
-> NEW: Preview the alternative new [Krajee Explorer Theme](http://plugins.krajee.com/file-krajee-explorer-demo) for `bootstrap-fileinput` (available since release v4.3.7).
|
|
|
+> NOTE: An alternative new [Krajee Explorer Theme](http://plugins.krajee.com/file-krajee-explorer-demo) (preview shown below) for `bootstrap-fileinput` has been released and available since v4.3.7. For more theming options and suggestions refer the [theming demos](http://plugins.krajee.com/file-theme-demo).
|
|
|
+
|
|
|
+
|
|
|
|
|
|
## Documentation and Demo
|
|
|
|
|
@@ -24,9 +26,9 @@ View the [plugin documentation](http://plugins.krajee.com/file-input) and [plugi
|
|
|
3. Most modern browsers supporting HTML5 (inputs and FileReader API) including CSS3 & JQuery. For Internet Explorer, one must use IE versions 10 and above. IE9 and below will work as a normal file input, and will not support multiple file selection or the HTML 5 FileReader API.
|
|
|
4. With release 4.0, AJAX uploads are supported. AJAX uploads require that the browser support HTML5 FormData and XHR2 (XMLHttpRequest 2). Most modern browsers support FormData and XHR2. The plugin will automatically degrade to normal form based submission for browsers not supporting AJAX uploads
|
|
|
|
|
|
-> NOTE: The latest version of the plugin is v4.3.8 (under development). Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
|
|
|
-
|
|
|
-> NOTE: You can use the [sass branch](https://github.com/kartik-v/bootstrap-fileinput/tree/sass) for installation using `bootstrap-sass` dependency.
|
|
|
+> NOTE:
|
|
|
+> - The latest version of the plugin is v4.3.8. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
|
|
|
+> - You can use the [sass branch](https://github.com/kartik-v/bootstrap-fileinput/tree/sass) for installation using `bootstrap-sass` dependency.
|
|
|
The [master branch](https://github.com/kartik-v/bootstrap-fileinput/tree/master) can be used for installation using plain `bootstrap` dependency.
|
|
|
|
|
|
## Installation
|
|
@@ -56,7 +58,7 @@ You can also manually install the plugin easily to your project. Just download t
|
|
|
Step 1: Load the following assets in your header.
|
|
|
|
|
|
```html
|
|
|
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
|
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
|
|
@@ -72,7 +74,7 @@ Step 1: Load the following assets in your header.
|
|
|
<script src="path/to/js/fileinput.min.js"></script>
|
|
|
<!-- bootstrap.js below is needed if you wish to zoom and view file content
|
|
|
in a larger detailed modal dialog -->
|
|
|
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
<!-- optionally if you need a theme like font awesome theme you can include
|
|
|
it as mentioned below -->
|
|
|
<script src="path/to/themes/fa/theme.js"></script>
|