bootstrap-fileinput
===================
[![Bower version](https://badge.fury.io/bo/bootstrap-fileinput.svg)](http://badge.fury.io/bo/bootstrap-fileinput)
[![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-fileinput/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)
[![License](https://poser.pugx.org/kartik-v/bootstrap-fileinput/license)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)
[![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-fileinput/downloads)](https://packagist.org/packages/kartik-v/bootstrap-fileinput)
[![Monthly Downloads](https://poser.pugx.org/kartik-v/bootstrap-fileinput/d/monthly)](https://packagist.org/packages/kartik-v/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.
![File Input Screenshot](https://lh3.googleusercontent.com/-3FiEmc_okc4/VBw_d2LBAJI/AAAAAAAAAL8/KbVj5X9Dus0/w596-h454-no/FileInput.jpg)
> NOTE: The latest version of the plugin is v4.3.2 (dev-master). Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
## Documentation and Demo
View the [plugin documentation](http://plugins.krajee.com/file-input) and [plugin demos](http://plugins.krajee.com/file-input/demo) at Krajee JQuery plugins.
## Pre-requisites
1. [Bootstrap 3.x](http://getbootstrap.com/)
2. Latest [JQuery](http://jquery.com/)
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: 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
### Using Bower
You can use the `bower` package manager to install. Run:
bower install bootstrap-fileinput
### Using Composer
You can use the `composer` package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-fileinput "@dev"
or add:
"kartik-v/bootstrap-fileinput": "@dev"
to your composer.json file
### Manual Install
You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-fileinput/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-fileinput/tarball/master) and extract the plugin assets (css and js folders) into your project.
## Usage
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="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.
This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<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>
<!-- optionally if you need a theme like font awesome theme you can include
it as mentioned below -->
<script src="path/to/themes/fa/fa.js"></script>
<!-- optionally if you need translation for your language then include
locale file as mentioned below -->
<script src="path/to/js/locales/<lang>.js"></script>
```
If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `fileinput.min.css` and `fileinput.min.js`. The theme file `fa.js` can be optionally included for the font awesome icons styling. The locale file `<lang>.js` can be optionally included for translating for your language if needed.
**Optional Dependent Plugins**
- The `canvas-to-blob.min.js` file is the source for the [JavaScript-Canvas-to-Blob plugin by blueimp](https://github.com/blueimp/JavaScript-Canvas-to-Blob). It is required to be loaded before `fileinput.min.js` if you wish to use the image resize feature of the **bootstrap-fileinput** plugin.
- The `sortable.min.js` file is the source for the [Sortable plugin by rubaxa](https://github.com/rubaxa/Sortable). It is required to be loaded before `fileinput.min.js` if you wish to sort the thumbnails in the initial preview.
- The `purify.min.js` file is the source for the [DomPurify plugin by cure53](https://github.com/cure53/DOMPurify). It is required to be loaded before `fileinput.min.js` if you wish to purify your HTML for HTML content preview.
For ease of access, the sources for the above plugins are included in the `js/plugins` folder of this project repository.
Step 2: Initialize the plugin on your page. For example,
```js
// initialize with defaults
$("#input-id").fileinput();
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
```
The `#input-id` is the identifier for the input (e.g. `type = file`) on your page, which is hidden automatically by the plugin.
Alternatively, you can directly call the plugin options by setting data attributes to your input field.
```html
<input id="input-id" type="file" class="file" data-preview-file-type="text" >
```
## License
**bootstrap-fileinput** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
OPMS管理系统 v1.3.zip (646个子文件)
33483ebad65b55735b1b58c3f3f435b4 2KB
44efb66b703e9e43640a96af0dca60ae 659B
461ebabb503c63703026619df1d59a7a 2KB
4d1ffc72215fcb849387216df236799c 2KB
5c86ba84aa2ae1cad79edf8bd55330e6 2KB
5eaa1cf067fd6a9f6b5b7fb95cbafca1 2KB
666e9da561f31e74b5d07e120fdefca5 1KB
a9fee77b35f1e5634087029564a73cf9 2KB
build.bat 1014B
bba9f0edfa24b2e5f5e6bd91de5f3794 1KB
c8d83cc0c276d929b40ab7cc78312228 1KB
app.conf 794B
bootstrap.css 118KB
bootstrap.min.css 98KB
style.css 90KB
jquery-ui-1.10.3.css 35KB
font-awesome.css 21KB
default.css 20KB
font-awesome.min.css 17KB
datetimepicker-custom.css 12KB
datetimepicker.css 12KB
datetimepicker.css 12KB
demo_table.css 11KB
demo_table_jui.css 8KB
fileinput.css 7KB
clndr.css 6KB
fileinput.min.css 5KB
style-responsive.css 5KB
datepicker-custom.css 5KB
jquery.dataTables_themeroller.css 4KB
jquery.dataTables.css 4KB
datepicker.css 4KB
cropper.min.css 4KB
lightbox.css 4KB
DT_bootstrap.css 4KB
bootstrap-reset.css 3KB
qq.css 3KB
table-responsive.css 3KB
bootstrap-fileupload.min.css 3KB
lightbox.min.css 3KB
simple.css 2KB
demo_page.css 2KB
jquery.stepy.css 1KB
prettify.css 960B
d9c922b52bd9f6c152f752fff88bc1af 2KB
.DS_Store 6KB
e2bc3ed12417d34cf09925072b970003 2KB
e5c5473099c5558db47db5d6e9e11d2c 2KB
fontawesome-webfont.eot 37KB
glyphicons-halflings-regular.eot 20KB
static.gif 35KB
35.gif 13KB
42.gif 13KB
40.gif 10KB
loading.gif 8KB
18.gif 8KB
19.gif 8KB
11.gif 8KB
32.gif 7KB
49.gif 6KB
29.gif 6KB
97.gif 5KB
65.gif 5KB
31.gif 5KB
46.gif 5KB
57.gif 5KB
45.gif 5KB
8.gif 5KB
43.gif 4KB
33.gif 4KB
68.gif 4KB
26.gif 4KB
14.gif 4KB
7.gif 4KB
51.gif 4KB
10.gif 4KB
47.gif 4KB
72.gif 4KB
6.gif 3KB
94.gif 3KB
84.gif 3KB
41.gif 3KB
17.gif 3KB
9.gif 3KB
28.gif 3KB
50.gif 3KB
95.gif 3KB
22.gif 3KB
27.gif 3KB
67.gif 3KB
90.gif 3KB
loading-sm.gif 3KB
60.gif 3KB
loading.gif 3KB
58.gif 3KB
74.gif 2KB
25.gif 2KB
101.gif 2KB
54.gif 2KB
99.gif 2KB
共 646 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
小小姑娘很大
- 粉丝: 4091
- 资源: 2338
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功