如何使用 javascript 检测错误标记的 WebP 文件？ [复制]

Question

我接受这样的新文件：

<input type="file" accept="image/x-png,image/gif,image/jpeg" required>

我目前没有安装转换器，因此上传的 webp 图像在 ios 或 Safari 上显示时将无法正常工作。为了解决这个问题，我添加了 jpg、png 和 gif 的“accept”属性。

但是，如果用户将 webp 重命名为接受的文件之一，我的文件选择器将不会检测到错误标签，但它仍然是 webp，因此如所述那样被破坏。

有没有更好的方法来使用 html 或 javascript 检查文件类型？

Answer 1

// JS

    <script>
      var fileextension = "jpg|jpeg|gif|png|ico|bmp";

      function checkExtension(value)
      {
      if(value=="")return true;
      var re = new RegExp("^.+\.("+fileextension+")$","i");
      if(!re.test(value))
      {
      alert("File not allowed! \n" + value + "\n\nAllowed:    
      "+fileextension.replace(/\|/g,',')+" \n\n");
       return false;
       }

       return true;
       }
   </script>

//HTML

 <input type="file" name="image" onChange="checkExtension(this.value)">