Question

我接受这样的新文件：

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

我目前没有转换器，因此在ios或Safari上显示时，上传的webp图像将无法工作。为了解决这个问题，我添加了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)">

如何使用javascript检测标签错误的WebP文件？

1 个答案: