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.
![Krajee Default Theme](https://lh3.googleusercontent.com/-e_E3qNVdEMg/WKvYxZ3W-CI/AAAAAAAAAWs/KJIdNxDpLR8pkqiflpmMAS3KMFkQIab3QCJoC/w530-h430-p-rw/BootstrapFileInput-01.jpg)
> 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).
![Krajee Explorer Theme](https://lh3.googleusercontent.com/-cQpItvVFhjY/WKvb0ARaI-I/AAAAAAAAAXA/moGMDgujK8EnYEyDnBReRgt_xw-V4JQ8wCJoC/w530-h318-p-rw/BootstrapFileInput-02.jpg)
## 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:
> - The latest version of the plugin is v4.4.3. 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
### 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.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>
<!-- piexif.min.js is only needed if you wish to resize images before upload to restore exif data.
This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/piexif.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.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>
<!-- 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 `themes/fa/theme.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 `piexif.min.js` file is the source for the [Piexifjs plugin by hMatoba](https://github.com/hMatoba/piexifjs). 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.
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~ 本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~ 本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~
资源推荐
资源详情
资源评论
收起资源包目录
《毕业设计&代码复用》--基于安卓AndroidStudio在线订餐app设计毕业源码案例设计.zip (796个子文件)
gradlew.bat 2KB
build.bat 1KB
.classpath 14KB
bootstrap.css 193KB
bootstrap.min.css 156KB
bootstrap.css 143KB
bootstrap.min.css 118KB
style.min.css 110KB
remixicon.css 102KB
icofont.min.css 90KB
materialdesignicons.min.css 85KB
animate.css 76KB
boxicons.css 75KB
animate.css 74KB
bootstrap-grid.css 66KB
boxicons.min.css 60KB
animate.min.css 57KB
bootstrap-grid.min.css 50KB
style.css 42KB
jquery-ui.min.css 31KB
bootstrap-theme.css 26KB
aos.css 25KB
bootstrap-theme.min.css 25KB
bootstrap-datepicker3.css 23KB
jquery-confirm.min.css 22KB
bootstrap-datepicker3.min.css 21KB
venobox.css 20KB
venobox.min.css 18KB
ion.rangeSlider.min.css 11KB
fileinput.css 10KB
bootstrap-datetimepicker.css 9KB
bootstrap-table.min.css 8KB
fileinput.min.css 8KB
bootstrap-datetimepicker.min.css 8KB
animations.css 7KB
bootstrapStyle.css 6KB
bootstrap-table.min.css 5KB
theme.css 5KB
bootstrap-colorpicker.css 5KB
theme.css 5KB
bootstrap-reboot.css 5KB
owl.carousel.css 5KB
bootstrap-colorpicker.min.css 4KB
bootstrap-reboot.min.css 4KB
theme.min.css 4KB
theme.min.css 3KB
owl.carousel.min.css 3KB
fileinput-rtl.css 2KB
fileinput-rtl.min.css 2KB
owl.theme.default.css 1KB
owl.theme.green.css 1KB
owl.theme.green.min.css 1013B
owl.theme.default.min.css 1013B
jquery.tagsinput.min.css 903B
bootstrap-markdown.min.css 796B
bootstrap-iconpicker.css 738B
bootstrapValidator.css 730B
bootstrapValidator.min.css 705B
transformations.css 683B
jquery.treegrid.min.css 314B
remixicon.eot 372KB
materialdesignicons.eot 286KB
boxicons.eot 257KB
glyphicons-halflings-regular.eot 20KB
ajax-loader.gif 3KB
loading-sm.gif 3KB
loading.gif 847B
.gitignore 291B
.gitignore 240B
.gitignore 184B
.gitignore 67B
.gitignore 50B
.gitignore 6B
build.gradle 1KB
build.gradle 553B
settings.gradle 45B
gradlew 5KB
menu_list.html 29KB
role_list.html 27KB
permission_list.html 23KB
user_list.html 17KB
food_list.html 13KB
reg.html 11KB
user_info.html 9KB
index.html 8KB
include.html 7KB
user_editpwd.html 6KB
login.html 5KB
order_list.html 4KB
main.html 2KB
error403.html 2KB
error404.html 1KB
chart.html 1KB
index.html 1KB
error403.html 164B
error.html 148B
glide-3.7.0.jar 464KB
gradle-wrapper.jar 53KB
FoodsActivity.java 15KB
RegActivity.java 7KB
共 796 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
季风泯灭的季节
- 粉丝: 601
- 资源: 2920
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功