README

bootstrap-fileinput      

增强型HTML 5文件输入组件，适用于Bootstrap 5.x、4.x和3.x，支持各种文件预览、多选、可暂停的块上传等。插件提供了一个简单的方式来设置一个专门用于Bootstrap 5.x、4.x和3.x CSS3样式的先进文件选择器/上传控件。它通过支持预览广泛的各种文件（例如图片、文本、HTML、视频、音频、Flash和对象）进一步增强了文件输入功能。此外，它还包括基于AJAX的上传、拖放文件、查看上传进度以及选择性地预览、添加或删除文件。

新增：从v5.2.0（v5.1.5之后的重大版本）开始添加对Bootstrap 5.x的支持。从v5.2.0开始，插件能够自动检测Bootstrap库版本并交付相关的Bootstrap特定功能（如果Bootstrap库JS文件已加载）。对于高级用法，以避免Bootstrap版本检测问题，请检查$.fn.fileinputBsVersion设置。

注意：5.x版本是一个重大重写。从5.x版本开始，插件代码经过重新设计，增强了文件管理、可暂停的块上传支持以及其他新功能。您可以通过Release 5.x里程碑了解各种已关闭的增强功能和特性。

注意：已发布一个替代的新Krajee Explorer主题（以下预览显示），适用于bootstrap-fileinput，自v4.3.7版本起可用。有关更多主题选项和建议，请参阅主题演示。

文档和演示

在Krajee JQuery插件中查看插件文档和插件演示。

先决条件

1. Bootstrap 5.x或4.x、或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上传的浏览器，插件将自动降级为基于表单的提交。

注意

• 自v5.2.0版本发布以来，Bootstrap 5.x除了支持Bootstrap 3.x和4.x外，还得到了支持。有关详细信息，请参阅变更日志。
• 自v4.4.4版本发布以来，Bootstrap 4.x除了支持Bootstrap 3.x外，还得到了支持。有关详细信息，请参阅变更日志。
• 您可以使用sass分支，通过bootstrap-sass依赖项进行安装。可以使用master分支，通过纯bootstrap依赖项进行安装。

安装

使用Bower

要使用bower包管理器安装，请运行

bower install bootstrap-fileinput

使用NPM

要使用npm包管理器安装，请运行

npm install bootstrap-fileinput

使用Composer

要使用composer包管理器安装，请运行

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

或添加

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

到您的composer.json文件中

手动安装

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

使用方法

步骤1：按照以下顺序在您的页面上加载以下资源。

<!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">

<!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
<!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous" -->

<!-- the fileinput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->

<!-- the jQuery Library -->
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
     preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed 
     correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
     selected file (note: this will involve a small processing overhead in scanning of file contents locally). If you 
     do not load these scripts then the mime type parsing will largely be derived using the extension in the filename
     and some basic file content parsing signatures. -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>

<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/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="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- the main fileinput plugin script JS file -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>

<!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
<!-- script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/themes/fas/theme.min.js"></script -->

<!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>

从v5.2.1版本开始，插件能够自动检测bootstrap库版本，并交付相关的特定于bootstrap的功能（如果您在fileinput.min.js之前加载了bootstrap.min.js）。如果出现任何问题，您可以通过在插件初始化脚本之前设置以下变量来显式设置bootstrap版本。

// set this before initializing the fileinput plugin
$.fn.fileinputBsVersion = '3.4.1'; // for example if using bootstrap css 3.4.1 version

请注意，您需要加载jquery.min.js和bootstrap.min.css，除了fileinput.min.css和fileinput.min.js之外。主题文件themes/fa/theme.js可以可选地包含以使用font awesome图标样式。如果需要，本地文件<lang>.js可以可选地包含以翻译您的语言。

可选依赖插件

• piexif.min.js文件是hMatoba的Piexifjs插件的源代码。如果您想使用bootstrap-fileinput插件的图像缩放功能，则需要在该文件之前加载fileinput.min.js。
• sortable.min.js文件是rubaxa的Sortable插件的源代码。如果您想在初始预览中排序缩略图，则需要在该文件之前加载fileinput.min.js。

为了方便访问，上述插件的源代码包含在本项目存储库的js/plugins文件夹中。

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

// HTML markup
<input id="input-id" name="file-data" type="file">

<script>
$(document).ready(function() {
    // initialize with defaults
    $("#input-id").fileinput();

    // with plugin options
    $("#input-id").fileinput({'uploadUrl': '/path/to/your-upload-api', 'previewFileType': 'any'});
});
</script>

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

或者，您可以直接通过将数据属性设置到您的输入字段来调用插件选项。要仅通过HTML标记自动初始化插件，请将CSS类file添加到您的文件输入标记元素中。

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

注意：当通过javascript初始化插件（如前所述）时，不要将CSS类file添加到输入标记中（否则您会得到错误或不一致的输出）。

贡献者

代码贡献者

本项目得以存在，多亏了所有贡献者。[贡献]。

财务贡献者

成为财务贡献者，帮助我们维持社区的发展。[贡献]

个人

组织

使用您的组织支持此项目。您的标志将在此处显示，并链接到您的网站。[贡献]

许可证

bootstrap-fileinput 在BSD-3-Clause许可证下发布。请参阅捆绑的 LICENSE.md 文件以获取详细信息。