Check an image mime type with FileReader javascript before uploading that

Question

I am wondering to know whether I can check a file mime type before uploading that or not? I've already know how to do that in server side after uploading that file, but how can I do that in client side before uploading the file?

index code:

<form action="/" method="post" enctype="multipart/form-data" id="form">
  <input id="image" type="file" />
  <input type="submit" value="Submit" id="submit" />
</form>

What I want is this: as soon as user upload an image, check its mime type in client side. It should be jpg, jpeg or png.

NOTE: I don't want to check its extension, that is really easy. I want to check its mime type. For example if a person rename a txt.txt to txt.png, should give an error.

Thanks in advance.

If you can help me with this, that would be better: The reason I want to check the mime type on client is that I want to preview that image immediately after choosing that, and if a user choose a non-image file, it will preview an ugly photo icon. I want to prevent that. For example if a person choose a non-image file, simply display them that the file you choosed, is not image. So if you can show me how to check whether the image can be displayed or not.

Answer 1

Try This.

document.getElementById('fileChooserID').files[0].type