HTML 文件输入 — "accept" 属性无效

Question

通读 comments on this post 之后，我想出了以下 accept 属性的语法：

图片

<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 上似乎根本无法过滤文件。

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

Answer 1

"accept" 属性的浏览器支持的详细列表在 w3 schools 中列出。看一看。它可能对你有帮助。

Answer 2

我遇到了同样的问题，找到了这个页面，这是我使用 onChange 事件的解决方法。

我知道这不是真正的过滤，而且非常难看（我不喜欢），但它确实有效。我在 iOS 和 Android 设备上进行了测试。

<script type="text/javascript">
 let file;
 function checkFile() {
  file = document.querySelector('input[type=file]').files[0];
  if (file.type != "image/png") {
   file = null;
   document.getElementById('image').remove();
   let div = document.getElementById('div');
   let image = document.createElement('input');
   image.setAttribute('type', 'file');
   image.setAttribute('id', 'image');
   image.setAttribute('accept', 'image/png');
   image.setAttribute('onchange', 'checkFile()');
   div.appendChild(image);
   window.alert('unsupported file type');
  }
 }
</script>
<div id="div">
 <input type="file" id="image" accept="image/png" onchange="checkFile()">
</div>

Answer 3

我无法获得适用于移动设备的 accept 属性。最终我不得不在输入中添加一个 onchange handler（如下所示的总体思路）。

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

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 文件输入 — "accept" 属性无效

HTML file input — "accept" attribute not working

html

cross-browser

mime-types