jQuery Bootstrap 4 文件输入

在本文中，我们将介绍如何使用jQuery和Bootstrap 4创建一个漂亮和功能丰富的文件输入组件。

什么是文件输入组件？

文件输入组件是一种HTML表单元素，允许用户选择并上传文件。传统的文件输入组件通常很丑陋，并且样式难以自定义。因此，我们可以使用jQuery和Bootstrap 4来改善用户体验，并创建一个更美观和易用的文件输入组件。

准备工作

在开始之前，确保你已经下载并安装了jQuery和Bootstrap 4。你可以在官方网站上找到所需的文件，并将它们链接到你的HTML文档中。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>File Input Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- 文件输入组件的HTML代码将在后面的示例中给出 -->

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

创建基本的文件输入组件

首先，让我们创建一个基本的文件输入组件并使其显示在页面上。添加以下HTML代码到你的文档中：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">选择文件</label>
</div>

以上代码中，custom-file是Bootstrap 4提供的一个特殊样式类，用于自定义文件输入组件。custom-file-input是文件输入组件本身，customFile是文件输入元素的ID，custom-file-label是文件输入组件的标签。

定制文件输入组件的样式

默认情况下，文件输入组件的样式并不好看。我们可以使用一些CSS样式来改进它的外观。只要加入以下CSS代码到你的HTML文档的<head>标签中：

<style>
.custom-file-label::after {
  content: "选择";
}

.custom-file-input:lang(zh) ~ .custom-file-label::after {
  content: "浏览";
}
</style>

这段CSS代码将修改文件输入组件的标签文本，把默认的Choose file改为选择（或者如果你的页面是中文页面，则显示浏览）。

处理文件输入

现在我们已经创建了一个漂亮的文件输入组件，接下来我们需要编写一些JavaScript代码来处理用户选择的文件。添加以下JavaScript代码到你的HTML文档中：

<script>
(document).ready(function() {
  // 当用户选择文件时，更新文件输入组件的标签文本('.custom-file-input').on('change', function() {
    var fileName = (this).val().split('\\').pop();(this).next('.custom-file-label').html(fileName);
  });
});
</script>

这段代码将在文件选择改变时，获取所选文件的名称，并将其更新为文件输入组件的标签文本。

添加进度条

在文件上传过程中，显示一个进度条可以使用户了解上传进度。我们可以使用Bootstrap 4的进度条组件来实现这一点。首先，添加进度条的HTML代码：

<div class="progress mt-4">
  <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

然后，添加以下JavaScript代码来更新进度条的宽度：

<script>
(document).ready(function() {
  // 当用户选择文件时，更新文件输入组件的标签文本('.custom-file-input').on('change', function() {
    var fileName = (this).val().split('\\').pop();(this).next('.custom-file-label').html(fileName);
  });

  // 当用户点击上传按钮时，显示进度条并模拟文件上传
  ('#upload-btn').on('click', function() {
    var progressBar =('.progress-bar');
    var width = 0;
    var id = setInterval(progress, 10);

    function progress() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        progressBar.css('width', width + '%');
        progressBar.attr('aria-valuenow', width);
        progressBar.html(width + '%');
      }
    }
  });
});
</script>