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>

这段代码将在用户点击上传按钮时启动一个定时器，每10毫秒增加进度条的宽度，直到达到100%。你可以根据自己的需求调整定时器的间隔和文件上传过程的持续时间。