如何让HTML <input>仅允许用户选择浏览器支持的图片格式？

我开发了一个纯客户端Web应用，专门处理用户选择的图片。从UI/UX角度出发，我希望打开文件选择对话框时只显示当前浏览器能读取的图片格式（这里的"支持"定义为：能在<img>标签中正常显示、能成功绘制到<canvas>上）。但现有两种方案都有明显缺陷：

• 使用accept="image/*"会放行所有图片格式，包括仅Safari支持的TIFF，导致用户可能选到其他浏览器无法处理的文件：

  <input type="file" accept="image/*" />
  

• 手动指定格式列表需要持续维护（比如AVIF已被多数浏览器支持，但旧版Chromium Edge除外），还得额外做特性检测，太繁琐：

  <input type="file" accept=".apng, .gif, .jpg, .jpeg, .jfif, .pjpeg, .pjp, .png, .svg, .webp, .bmp, .ico, .cur" />
  

我知道选完文件后仍需做错误检查（比如用户可能选损坏的PNG或任意文件），但还是想提前过滤掉不支持的格式，避免用户选完再弹错误提示。有没有标准或可靠的实现方式？

可行方案：动态检测+生成accept属性 #

目前没有完全不需要特性检测的标准解法，但通过动态检测浏览器支持的图片格式，实时生成input的accept属性是最靠谱的实现方式，能自动适配不同浏览器的能力：

1. 实现格式支持检测函数 #

通过创建<img>元素，尝试加载对应格式的最小测试资源（用Blob或data URL），判断浏览器是否支持该格式：

async function getSupportedImageFormats() {
  // 待检测的格式列表：扩展名 -> MIME类型
  const formatMap = {
    apng: 'image/apng',
    avif: 'image/avif',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    webp: 'image/webp',
    bmp: 'image/bmp',
    ico: 'image/x-icon',
    tiff: 'image/tiff'
  };

  const supportedExtensions = [];

  for (const [ext, mimeType] of Object.entries(formatMap)) {
    try {
      let testSource;
      // 针对特殊格式生成测试资源
      if (ext === 'svg') {
        testSource = URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg"></svg>'], { type: mimeType }));
      } else if (ext === 'ico') {
        // 极简ICO文件头（12字节）
        const icoHeader = new Uint8Array([0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x10, 0x10, 0x00, 0x00, 0x01, 0x00]);
        testSource = URL.createObjectURL(new Blob([icoHeader], { type: mimeType }));
      } else {
        // 用极小的data URL测试，避免跨域和网络请求
        testSource = `data:${mimeType};base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`;
      }

      // 测试图片加载及canvas绘制能力
      await new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          // SVG和ICO需额外验证canvas绘制能力
          if (ext === 'svg' || ext === 'ico') {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            try {
              ctx.drawImage(img, 0, 0);
              resolve();
            } catch (e) {
              reject();
            }
          } else {
            resolve();
          }
        };
        img.onerror = reject;
        img.src = testSource;
      });

      supportedExtensions.push(`.${ext}`);
      // 清理Blob URL
      if (testSource.startsWith('blob:')) URL.revokeObjectURL(testSource);
    } catch (err) {
      // 不支持该格式，跳过
      continue;
    }
  }

  return supportedExtensions;
}

2. 动态设置input的accept属性 #

在页面加载完成后，调用检测函数并设置input的accept值：

document.addEventListener('DOMContentLoaded', async () => {
  const fileInput = document.querySelector('#image-upload');
  const supportedFormats = await getSupportedImageFormats();
  fileInput.accept = supportedFormats.join(', ');
});

关键优势 #

• 自动适配浏览器：比如旧版Edge不支持AVIF就不会把它加入过滤列表，Safari支持TIFF就会自动包含，无需手动维护适配逻辑。
• 低维护成本：待检测的格式列表只需在新格式成为主流时添加，远比重写accept属性省心。
• 符合UX需求：文件选择框只会显示当前浏览器能处理的格式，减少用户选错的概率。

注意事项 #

• 依然要保留文件选择后的验证逻辑：用户可以通过文件选择框的"所有文件"选项选择任意文件，或上传损坏的文件，这些情况必须在后续处理中校验。
• 检测函数的测试资源已经尽可能简化，不会占用过多性能，可放心在前端执行。

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