如何使用Javascript在移动端浏览器检测用户文件/相册访问权限

当前没有跨所有浏览器的标准Web API可以直接查询文件/相册访问权限，你之前尝试的Permission API、getUserMedia确实只覆盖相机、麦克风等媒体权限，不包含文件读取权限。
目前业界通用的可落地方案如下：

方案1：弹窗阻塞计时检测（兼容性最高，覆盖99%场景） #

这个方案利用了系统文件选择器弹出时会阻塞浏览器JS主线程的特性，实现逻辑：

• 监听<input type="file">的点击事件，点击触发时立即记录当前时间戳，同时启动一个计时器（建议设置1000ms阈值）
• 同时监听页面的focus事件，当页面重新获得焦点时（也就是用户关闭了文件选择器），计算当前时间和点击时的时间差
• 如果时间差小于你设置的阈值，说明点击后没有弹出文件选择器，大概率是权限被拒绝，可以弹出引导提示

代码示例 #

const fileInput = document.querySelector('input[type="file"]');
let clickTime = 0;
const PERMISSION_BLOCK_THRESHOLD = 1000; // 单位ms，可根据场景调整

fileInput.addEventListener('click', () => {
  clickTime = Date.now();
});

window.addEventListener('focus', () => {
  if (!clickTime) return;
  const timeDiff = Date.now() - clickTime;
  clickTime = 0; // 重置状态
  if (timeDiff < PERMISSION_BLOCK_THRESHOLD) {
    // 命中权限拦截逻辑，弹出提示
    alert('请在系统设置中开启相册/文件访问权限，否则无法选择文件');
  }
});

注意事项 #

• 阈值可根据实际测试调整，低性能移动端设备可适当调高到1500ms避免误判
• 该方案存在极个别极端场景误判可能，仅用于用户引导，不要做强制业务拦截

方案2：特定容器下的原生能力调用 #

如果你的页面运行在微信、支付宝、各厂商App内嵌WebView中，可以直接调用对应端侧提供的权限查询API，这类API可以100%准确获取权限状态，可靠性远高于通用浏览器方案。

额外优化建议 #

• 可以给<input type="file">外层套一个自定义按钮，点击自定义按钮时先做一次弱提示，告知用户需要文件访问权限，降低用户拒绝权限的概率
• 针对安卓部分浏览器，可以在用户首次拒绝权限后，引导用户到浏览器设置页面手动开启权限

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