iOS/iPadOS下input file指定不常见扩展名失效的解决方案咨询

问题背景 #

使用<input type="file" id="upload_file_input" accept=".dtx, .wif, .wpo">实现编织图案文件上传时，macOS 15的Safari和Brave能正常过滤目标文件，但iOS/iPadOS的同浏览器完全失效：.dtx、.wif、.wpo文件被禁止，反而允许.py等无关文本文件；指定.pdf等常见扩展名时虽能识别目标类型，但仍无法阻挡.py文件；移除accept属性后，iOS上传菜单会显示冗余的照片图库/拍摄选项，体验糟糕。临时方案accept="application/octet-stream, .dtx, .wif, .wpo"在macOS正常，但iOS会允许所有文件。

解决方案 #

针对iOS/iPadOS WebKit内核（Safari、Brave基于此）对自定义扩展名的处理缺陷，采用以下组合方案：

1. 优化accept属性的MIME类型与扩展名组合
   结合文本类型、二进制类型和扩展名声明，让iOS能正确匹配目标文件：

   <input type="file" id="upload_file_input" accept="text/plain, application/octet-stream, .dtx, .wif, .wpo">
   

   • text/plain对应.dtx、.wif这类文本格式的自定义扩展名
   • application/octet-stream对应.wpo二进制文件
   • 保留扩展名声明，让浏览器优先匹配文件名后缀

2. 前端手动验证文件扩展名（必加兜底逻辑）
   由于浏览器的accept属性可能被绕过（比如用户修改文件扩展名），必须通过JavaScript手动校验：

   document.getElementById('upload_file_input').addEventListener('change', function(e) {
     const allowedExts = ['.dtx', '.wif', '.wpo'];
     const selectedFile = e.target.files[0];
     if (!selectedFile) return;
   
     const fileExt = selectedFile.name.toLowerCase().substring(selectedFile.name.lastIndexOf('.'));
     if (!allowedExts.includes(fileExt)) {
       alert('仅支持上传.dtx、.wif或.wpo格式的文件');
       e.target.value = ''; // 清空错误选择
       return;
     }
     // 这里写文件上传或后续处理逻辑
   });
   

3. 优化iOS上传菜单体验
   添加capture="filesystem"属性，强制iOS直接打开文件选择器，跳过照片相关选项：

   <input type="file" id="upload_file_input" accept="text/plain, application/octet-stream, .dtx, .wif, .wpo" capture="filesystem">
   

效果说明 #

• macOS端：仍能精准过滤目标文件，禁止pdf、jpeg等无关类型
• iOS/iPadOS端：仅允许选择.dtx、.wif、.wpo文件，上传菜单直接进入文件选择界面，体验提升
• 兜底校验确保无论浏览器行为如何，都能拦截不符合要求的文件

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