To check if the file is really an image, through PHP, there is already a question answered about this in What is the safest way to identify that the upload file is an image?.
Now, responding how to lock some file types in the check box that appears, its "best" option is to use the attribute Accept of tag input. In the code below you allow files of type .jpg
, .png
, and .gif
. See on snippet:
<input type="file" accept="image/x-png, image/gif, image/jpeg" />
Or if you want to allow all image types you can do as follows:
<input type="file" accept="image/*" />
Importantly, this only suggests to the browser what types of files flaunt for the user, however this can be easily bypassed, so it is utmost importance you do the validation of the uploaded file in server also. Although it can usually be bypassed by users, it helps to reduce the results for users by default, so that they can get exactly what they are looking for without having to go through a hundred different file types.
For more detailed information on browser support, you can look at Can I Use. But, quickly, the accept
has support in IE 11, Firefox since version 56, and Chrome since version 49. On mobile devices, support is very incomplete. Some like Edge and Opera Mini have no support.
We also have an answered question about this in our Big Brother SO.
I couldn’t figure out how to perform the verification on that question so I performed mine.
– Everton Figueiredo