设置文件夹选择属性的input type="file"在安卓端无法选择图片问题咨询

你当前使用的webkitdirectory/mozdirectory/directory均为桌面端浏览器的私有实现属性，安卓端Chrome及系统自带浏览器均未适配该属性对应的文件夹选择交互逻辑，属性共存会导致安卓系统选图器逻辑冲突，就会出现点击图片直接退出、无法选中文件的问题。

• 方案1：环境差异化处理（推荐，适配成本最低）
  前端通过navigator.userAgent判断用户设备，桌面端保留原有带directory系列属性的input实现文件夹选择，安卓端去掉所有directory相关属性，仅保留multiple和accept="image/*"即可，安卓端适配后的input代码示例：

  <input type="file" name="files[]" id="files" accept="image/*" multiple>
  

  修改后安卓端点击input即可正常唤起系统选图器，支持单张/多张图片选中，input可正常读取选中的图片文件。

• 方案2：自研文件夹选择逻辑（仅特殊场景使用）
  如果你需要安卓端也实现直接选中整个文件夹的效果，可以调用文件系统访问API实现前端侧的文件夹目录读取逻辑，该方案仅支持安卓Chrome 86及以上版本，需要额外处理权限申请逻辑，开发成本较高，普通上传场景不推荐使用。

代码按方案1调整后，用户可按以下操作完成选图：

• 选单张图片：直接点击目标图片，系统自动确认返回表单页即可
• 选多张图片：长按任意一张目标图片进入多选模式，点击勾选所有需要上传的图片后，点击系统选图器右上角的「完成」按钮即可
• 选整个文件夹所有图片：在系统唤起的文件列表中找到目标图片文件夹并进入，长按任意一张图片进入多选模式，点击顶部操作栏的「全选」按钮，再点击完成即可。

部分品牌安卓设备的系统选图器全选按钮位置可能有差异，若找不到全选按钮，也可以引导用户打开系统自带的文件管理器，找到目标图片文件夹后选中整个文件夹，再确认上传即可，主流文件管理器均支持和浏览器input控件对接。

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