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

<!DOCTYPE html>
<html>
<body>

Image:<input type="file" name="fileToUpload" id="fileToUpload" accept="image/*" id="capture"  required><br><br>
  Song:<input type="file" name="Audio" accept="audio/*"><br><br>

  <input type="submit">

</body>
</html>

image / *表示它可以接受您不需要指定的所有类型的图像。祝你好运

Answer 2

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

Answer 3

我遇到了同样的问题，找到了此页面，这是我使用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 4

我无法获得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文件输入 - ＆＃34;接受＆＃34;属性不起作用

4 个答案: