HTML 文件输入 — “接受”属性不起作用答案

【问题标题】：HTML file input — "accept" attribute not workingHTML 文件输入 — “接受”属性不起作用
【发布时间】：2018-01-11 16:45:48
【问题描述】：

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

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

【问题讨论】：

标签： html cross-browser mime-types

【解决方案1】：

我无法让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 = '';
  }
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

我刚刚在Android上尝试过。行为并不完全相同，但过滤器对我来说正在 Android 上工作。例如当我提供选项.doc 时，只出现了选择document 的选项。当我只有image/* 时，提供了相机、驱动器等，但没有提供document 选项。