Bootstrap 5.x/4.x./3.x的增强HTML 5文件输入，具有文件预览、多选和更多功能。

Posted 2023-05-08

tags:

中文标题：Bootstrap 5.x/4.x./3.x的增强HTML 5文件输入，具有文件预览、多选和更多功能。 原文标题：An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features. 项目评级：Star:5300 Fork:2400 下载地址：https://github.com/kartik-v/bootstrap-fileinput 详情介绍

引导文件输入

Bootstrap 5.x、4.x和3.x的增强HTML 5文件输入，可预览各种文件，提供多种选择、可恢复的区块上传等功能。该插件允许您以一种简单的方式设置高级文件选择器/上传控件，该控件专门用于Bootstrap 5.x、4.x和3.x CSS3样式。它通过提供预览各种文件（即图像、文本、html、视频、音频、flash和对象）的支持，进一步增强了文件输入功能。此外，它还包括基于AJAX的上传、拖拽和；删除文件、查看上载进度以及选择性地预览、添加或删除文件。

新增：Bootstrap 5.x支持是从插件的v.2.0（v.1.5之后的主要版本）中添加的。使用v.2.0，该插件能够自动检测引导程序库版本，并提供相关的引导程序特定功能（如果加载了引导程序库JS文件）。或者，检查高级用例的$.fn.fileinputBsVersion设置，以避免Bootstrap版本检测问题。

注意：版本5.x是一个重要的重写。在5.x版本中，插件代码经过了改进，具有增强的文件管理、可恢复的区块上传支持和其他新功能。您可以浏览各种已关闭的增强功能和特性，并为Release 5.x里程碑进行文档记录。

注：bootstrap-fileinput的另一个新的Krajee Explorer主题（预览如下）已经发布，并从v4.3.7开始提供。有关更多主题化选项和建议，请参阅主题化演示。

文档和演示

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

预备知识

注意：

安装

使用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：按照上述顺序在页面上加载以下资产。

使用v5.2，插件能够自动检测引导程序库版本，并提供相关的引导程序特定功能（如果您在fileinput.min.js之前加载了bootstrap.min.js）。如果出现任何问题，您可以通过在插件初始化脚本之前设置以下变量来显式设置引导程序版本。

如果您注意到，除了fileinput.min.css和fileinput.min.js外，还需要加载jquery.min.js和bootstrap.min.css。可以选择包含主题文件themes/fa/theme.js，用于字体很棒的图标造型。如果需要，可以选择包含语言环境文件<lang>.js，用于翻译您的语言。

可选的相关插件

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

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

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

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

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

贡献者

代码贡献者

这个项目的存在要感谢所有做出贡献的人。[贡献]。

财务出资人

成为一名经济贡献者，帮助我们维持我们的社区。[贡献]

个人