javascript - 文件上传 : check if valid image

Question

我想上传这样的文件:

<input type="file" name="uploadPicture"/>

有没有办法在 javascript 中找出所选文件是否是有效图像？

我知道我可以检查文件扩展名。问题是有人可以将 .txt 文件更改为 .jpg 并且它会通过验证。

Answer 1

谢谢，Arūnas Smaliukas .你的回答让我接近了我想要的。

Image.onload 只有在文件是有效图像时才会被调用。因此，没有必要在 onload() 回调中检查 this.width。

要检测它是无效图像，您可以使用 Image.onerror。

$().ready(function() {
  $('[type="file"]').change(function() {
    var fileInput = $(this);
    if (fileInput.length && fileInput[0].files && fileInput[0].files.length) {
      var url = window.URL || window.webkitURL;
      var image = new Image();
      image.onload = function() {
        alert('Valid Image');
      };
      image.onerror = function() {
        alert('Invalid image');
      };
      image.src = url.createObjectURL(fileInput[0].files[0]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />