<input type="file" multiple/>在部分移动浏览器及WebView中失效的解决咨询

虽然Opera Mobile和应用内WebView基于Chrome Mobile内核，但它们并非完全照搬Chrome的所有功能：

• Opera Mobile会基于自身产品定位做定制化修改，比如为简化移动端交互，可能限制了原生多文件选择控件的默认行为；
• 应用内WebView的行为受宿主App配置影响，比如宿主App未给WebView配置文件访问权限、未实现多文件选择的回调逻辑，或者使用了较旧版本的WebView内核，导致无法支持多文件选择特性；
• 部分WebView会默认禁用一些非核心HTML5特性，需要宿主App显式开启相关支持。

1. 优化原生控件属性 #

给input控件显式指定accept属性（根据业务需求设置对应类型），部分浏览器对未指定类型的多文件选择支持不佳，明确类型能触发适配的文件选择器：

<input type="file" multiple accept="image/*,application/pdf"/>

（示例为支持图片和PDF，可根据实际需求调整）

2. 修复应用内WebView的配置问题 #

如果问题出在应用内WebView，需要宿主App做以下调整：

• 配置文件权限：Android平台需添加文件访问相关权限（Android 13+需使用细分的媒体权限，如READ_MEDIA_IMAGES）；iOS平台需确保App开启了文件访问权限。
• 实现多文件选择回调：Android的WebView需要自定义WebChromeClient并实现onShowFileChooser方法，处理多文件选择的请求，示例代码：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        // 这里启动系统文件选择器并处理返回的文件Uri数组
        // 务必返回true表示已处理该请求
        return true;
    }
});

• 更新WebView版本：确保使用最新的Android System WebView或Chrome内核版本，旧版本可能存在API兼容漏洞。

3. 适配Opera Mobile #

• 检查控件CSS样式：确保input控件没有被隐藏、覆盖或设置了异常交互属性，避免影响用户点击和选择行为；
• 用JS增强交互：监听input的change事件，手动处理文件列表，确保选择的文件能被正确捕获：

const fileInput = document.querySelector('input[type="file"][multiple]');
fileInput.addEventListener('change', (e) => {
    const selectedFiles = e.target.files;
    // 这里处理选中的文件，比如上传或展示
});

• 降级方案：如果Opera Mobile仍不支持，可通过JS检测浏览器类型，替换为多个单文件选择器，或提示用户切换至其他浏览器。

4. 通用特性检测与降级 #

通过JS检测当前环境是否支持多文件选择，不支持时自动降级：

const testInput = document.createElement('input');
testInput.type = 'file';
const isMultipleSupported = 'multiple' in testInput && typeof FileList !== 'undefined';

if (!isMultipleSupported) {
    // 移除multiple属性，降级为单文件选择
    const targetInput = document.querySelector('input[type="file"][multiple]');
    targetInput.removeAttribute('multiple');
    // 或者添加多个单文件输入框，实现类似多文件选择的效果
}

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