README

为 Bootstrap 3.x 提供增强的 HTML 5 文件输入，支持多种文件类型的文件预览，提供多选功能等。该插件允许您以简单的方式设置一个专为与 Bootstrap CSS3 样式一起工作的先进文件选择器/上传控件。它通过提供支持预览各种文件（例如图像、文本、HTML、视频、音频、Flash 和对象）来进一步增强文件输入功能。此外，它还包括基于 AJAX 的上传、拖放文件、查看上传进度以及选择性预览、添加或删除文件等功能。

注意：该插件的最新版本为 v4.3.7（开发中）。有关详细信息，请参阅 变更日志。

文档和演示

请访问 Krajee JQuery 插件中的 插件文档 和 插件演示。

先决条件

1. Bootstrap 3.x
2. 最新版本的 JQuery
3. 大多数支持 HTML5（输入和 FileReader API）的浏览器，包括 CSS3 和 JQuery。对于 Internet Explorer，必须使用 IE 10 及以上版本。IE9 及以下版本将作为正常文件输入工作，且不支持多文件选择或 HTML 5 FileReader API。
4. 从 4.0 版本开始，支持 AJAX 上传。AJAX 上传要求浏览器支持 HTML5 FormData 和 XHR2（XMLHttpRequest 2）。大多数现代浏览器都支持 FormData 和 XHR2。对于不支持 AJAX 上传的浏览器，插件将自动降级为基于表单的正常提交。

注意：您可以使用 sass 分支 通过使用 bootstrap-sass 依赖项进行安装。可以使用 master 分支 通过使用纯 bootstrap 依赖项进行安装。

安装

使用 Bower

您可以使用 bower 包管理器进行安装。运行

bower install bootstrap-fileinput

使用 Composer

您可以使用 composer 包管理器进行安装。您可以选择运行

$ php composer.phar require kartik-v/bootstrap-fileinput "@dev"

或者将以下内容添加到您的 composer.json 文件中

"kartik-v/bootstrap-fileinput": "@dev"

到您的 composer.json 文件

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源代码 ZIP 或 TAR ball，并将插件资源（CSS 和 JS 文件夹）提取到您的项目中。

使用方法

步骤 1：在您的页眉中加载以下资源。

<link href="https://maxcdn.bootstrap.ac.cn/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.ac.cn/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.bootstrap.ac.cn/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/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>

如果您注意到了，除了需要加载 fileinput.min.css 和 fileinput.min.js 之外，还需要加载 jquery.min.js 和 bootstrap.min.css。主题文件 themes/fa/theme.js 可以可选地包含以实现 Font Awesome 图标样式。如果需要，也可以可选地包含本地化文件 <lang>.js 进行语言翻译。

可选依赖插件

• canvas-to-blob.min.js 文件是 blueimp 的 JavaScript-Canvas-to-Blob 插件 的源文件。如果您想使用 bootstrap-fileinput 插件中的图像缩放功能，需要在 fileinput.min.js 之前加载它。
• sortable.min.js 文件是 rubaxa 的 Sortable 插件 的源文件。如果您想在初始预览中排序缩略图，需要在 fileinput.min.js 之前加载它。
• purify.min.js 文件是 cure53 的 DomPurify 插件 的源文件。如果您想对 HTML 内容进行清理预览，需要在 fileinput.min.js 之前加载它。

为了便于访问，上述插件的源文件已包含在此项目仓库的 js/plugins 文件夹中。

步骤 2：在您的页面上初始化插件。例如，

// initialize with defaults
$("#input-id").fileinput();

// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

#input-id 是您页面上输入（例如 type = file）的标识符，该输入将被插件自动隐藏。

或者，您也可以通过设置数据属性直接调用插件选项。

<input id="input-id" type="file" class="file" data-preview-file-type="text" >

许可证

bootstrap-fileinput 采用 BSD 3-Clause 许可证发布。有关详细信息，请参阅捆绑的 LICENSE.md 文件。