Bootstrap 4 多文件上传 - HTML

在Web开发中，文件上传是一个非常常见的操作。在前端开发中，使用Bootstrap 4可以轻松地实现多文件上传的功能。

HTML代码

<!-- 单文件上传 -->
<div class="form-group">
  <label for="file">选择文件：</label>
  <input type="file" id="file" name="file">
</div>

<!-- 多文件上传 -->
<div class="form-group">
  <label for="files">选择文件：</label>
  <input type="file" id="files" name="files" multiple>
</div>

以上代码展示了如何在HTML页面中添加单文件和多文件上传的表单元素。其中，单文件上传只需要一个file类型的输入框，而多文件上传需要添加multiple属性。

JavaScript代码

为了让上传操作更方便，我们可以使用JavaScript进行文件上传的处理。下面是一个使用jQuery实现的简单例子：

$(function() {
  // 绑定单文件上传的处理
  $('#file').change(function(){
    var file = $(this)[0].files[0];
    var form_data = new FormData();
    form_data.append('file', file);
    $.ajax({
      url: 'upload.php', // 上传文件的处理页面
      type: 'POST',
      data: form_data,
      processData: false,
      contentType: false,
      success: function(data){
        // 文件上传成功后的处理
        console.log(data);
      }
    });
  });

  // 绑定多文件上传的处理
  $('#files').change(function(){
    var form_data = new FormData();
    $.each($(this)[0].files, function(i, file) {
      form_data.append('files[]', file);
    });
    $.ajax({
      url: 'upload.php', // 上传文件的处理页面
      type: 'POST',
      data: form_data,
      processData: false,
      contentType: false,
      success: function(data){
        // 文件上传成功后的处理
        console.log(data);
      }
    });
  });
});

在以上代码中，我们使用了jQuery的ajax方法来上传文件，同时设置了processData和contentType为false，来避免jQuery对上传的数据进行处理。

结语

以上就是使用Bootstrap 4和JavaScript实现多文件上传的代码。需要注意的是，在实际应用中，我们还需要编写服务端的代码来接收文件并进行处理。