JS文件上传神器bootstrap fileinput详解

1. 简介

bootstrap fileinput是一个基于Bootstrap框架的文件上传插件，具有丰富的功能和完善的文档。使用该插件，可以实现包括文件选择、预览、上传、删除等多种操作。

2. 安装

安装bootstrap fileinput的步骤如下：

引入相关CSS文件、JS文件和Bootstrap文件：

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>

编写HTML代码：

<input id="input-id" type="file" multiple>

初始化插件：

$("#input-id").fileinput();

3. 示例

示例一：基本使用

下面是一个简单的示例，演示如何实现基本的文件上传功能：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Fileinput</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
  </head>
  <body>
    <input id="input-id" type="file">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $("#input-id").fileinput();
      });
    </script>
  </body>
</html>

上述示例中，点击“选择文件”按钮即可选择文件，选择完文件后，点击“上传”按钮即可上传文件。

示例二：显示预览

如果要显示文件上传的预览界面，可以加上如下代码：

$("#input-id").fileinput({
    showUpload: false,
    showCaption: false,
    browseClass: "btn btn-primary btn-lg",
    fileType: "any",
    previewFileIcon: "<i class='glyphicon glyphicon-file'></i>",
    overwriteInitial: false
});

上述代码中，设置了一些参数，包括：