输入类型=“文件”属性接受在 Macbook 上的 Safari 中不起作用

Question

我有以下代码：

<div class="row">
  <div class="col-xs-12">
    <div class="form-group">
      <label for="attachments">Attach a file</label>
      <input type="file" id="attachments" accept=".doc,.gif,.jpeg,.jpg,.pdf,.png,.xls,.xlsx,.zip" name="attachments" class="form-control">
    </div>
  </div>
</div>

windows的chrome浏览器可以正常使用，macbook的safari浏览器就不行了

对此有什么想法吗？

Answer 1

事实上，Safari 似乎不接受文件的扩展名作为accept 属性...
^{这可能被视为一个错误，因为他们会针对这个确切的文件扩展名进行 MIME 检测。 .)}

我目前看到的唯一解决方法是使用完整的 MIME 类型。
但这可能会导致一些问题，一些浏览器会使用操作系统的 MIME 类型字典来对抗...文件的扩展名。

因此，最好的做法是添加 MIME 和扩展。

<div class="row">
  <div class="col-xs-12">
    <div class="form-group">
      <label for="attachments">Attach a file</label>
      <input type="file" id="attachments" 
        accept="application/msword,image/gif,image/jpeg,application/pdf,image/png,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,.doc,.gif,.jpeg,.jpg,.pdf,.png,.xls,.xlsx,.zip" 
        name="attachments" class="form-control">
    </div>
  </div>
</div>

（从Apache's list 获得 MIME）

还要注意，这个accept 属性应该只是作为一种方便用户了解预期文件类型的方法，绝对不能作为检查您将获得的文件类型的一种方法。您的实际列表似乎如此多样化，以至于使用它几乎没有意义。