Bootstrap 3环境下实现多文件夹多文件选择的JavaScript技术求助

嘿，我来帮你搞定这个多文件夹选文件的问题！你之前的代码没生效，主要是没开启文件夹选择的关键配置，或者没用到原生HTML的文件夹选择属性。下面给你两种可行的方案：

方法1：原生HTML + Bootstrap 3样式（无需额外插件） #

原生file输入框支持通过特定属性开启文件夹选择模式，直接适配Bootstrap 3的样式就很简洁：

<div class="form-group">
  <label for="folder-select">选择多个文件夹中的文件</label>
  <input type="file" class="form-control" id="folder-select" name="files[]" 
         multiple webkitdirectory mozdirectory directory>
  <p class="help-block">可直接选择整个文件夹，自动包含文件夹内所有文件</p>
</div>
<button type="submit" class="btn btn-primary">提交文件</button>

属性说明：

• webkitdirectory：适配Chrome、Safari等webkit内核浏览器
• mozdirectory：适配Firefox浏览器
• directory：HTML5标准属性，适配未来更多现代浏览器
• multiple：允许同时选择多个文件夹/文件

方法2：修复你使用的Bootstrap FileInput插件代码 #

你用的fileinput插件本身支持文件夹选择，但需要添加关键配置项，同时要确保插件版本兼容Bootstrap 3。修改后的代码如下：

<div class="form1">
  <label for="input-folder-3">Select folders</label>
  <div class="file-loading">
    <input id="input-folder-3" name="input-folder-3[]" type="file" multiple>
    <br/>
    <input class="mt-3 btn btn-primary" type="submit" value="Ok" id="submit">
  </div>
</div>

<script>
$(document).ready(function() {
  $("#input-folder-3").fileinput({
    uploadUrl: "/file-upload-batch/2",
    hideThumbnailContent: true,
    // 核心配置：开启文件夹选择模式
    folderSelect: true,
    browseLabel: '选择文件夹',
    browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
    // 可选：限制仅显示文件，不显示文件夹预览
    allowedFileTypes: ['file'],
    // 可选：如果不需要即时上传功能可以关闭
    showUpload: false
  });
});
</script>

注意事项 #

• 浏览器兼容性：文件夹选择功能仅支持Chrome、Firefox、Edge等现代浏览器，IE完全不支持，若需兼容IE只能依赖Flash类第三方工具（不推荐）。
• 插件版本适配：确保你使用的fileinput插件是针对Bootstrap 3编译的版本，避免出现样式错乱问题。
• 后端处理：提交后后端接收到的是所有选中文件夹内的文件列表，不会传递文件夹层级结构，需注意后端的文件接收逻辑。

内容的提问来源于stack exchange，提问作者Priya Chauhan