HTML文件输入-“接受"属性不起作用 [英] HTML file input — "accept" attribute not working

问题描述

阅读了这篇文章的评论之后，我来了对于accept属性，使用以下语法:

After reading through the comments on this post, I came up with the following syntax for the accept attribute:

图片

<input type="file" accept="image/jpeg, image/png, image/gif, .jpeg, .png, .gif">

音频

<input type="file" accept="audio/mpeg, audio/x-wav, .mp3, .wav">

这在台式机浏览器上完美运行，但在iOS或Android上似乎根本无法过滤文件.

This works perfectly on desktop browsers, but does not appear to filter files at all on iOS or Android.

是否有可用的跨浏览器解决方案?

Are there any cross-browser solutions available?

推荐答案

我无法获取accept属性以用于移动设备.最终，我必须向其中添加 onchange处理程序输入(总的想法如下所示).

I was unable to get the accept attribute to work for mobile. Ultimately I had to add an onchange handler to the input (general idea shown below).

请记住，您仍然需要使用我的问题中所示的accept属性，因为它可以在桌面上使用.

Keep in mind, you'll still want to use the accept attribute as shown in my question, because it will work on desktop.

const supportedExtensions = ['jpeg', 'jpg', 'png', 'gif'];

const handleChange = ({ target }) => {
  const path = target.value.split('.');
  const extension = `${path[path.length - 1]}`;

  if (supportedExtensions.includes(extension)) {
    // TODO: upload
  } else {
      // TODO: show "invalid file type" message to user

      // reset value
      target.value = '';
  }
}

这篇关于HTML文件输入-“接受"属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！