Show only image files In input type file browse window?

Question

so basically how to filter the window popup to only show images files when i click the input type file

 <input type="file" />

any help appreciated, I try to find a solution for this

Thanks

Answer 1

You could use this, but it won't work in all browsers:

<input type="file" accept="image/*">

In Chrome you could even specify the formats you allow:

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

LIVING DEMO

If you want to restrict the image type you can still use JavaScript to validate it on the client side.

But of course you should check it on the server side with PHP as well:

//defining the allowed extensions and types for our system.
$allowedMimes = array('image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/bmp', 'image/wbmp');
$allowedExtensions = array('jpg', 'gif', 'jpeg', 'png', 'bmp', 'wbmp');

$extension = end(explode('.',$imgFile));

//is the extension allowed?
if(in_array($extension, $allowedExtensions)){

    //getting the mime type (it can be different from the extension) Be careful!
    $imgInfo = getimagesize('yourPath/'.$imgFile);
    $type = strtolower($imgInfo['mime']);

    //checking the mime type
    if(!in_array($type, $allowedMimes)){
         // is an allowed image type
    }
}

Answer 2

I think u are looking for the accept parameter. Try this works

<input type="file" accept="image/*" />

For the list of mime types, check the link below:

http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 3

This is not possible. That's part of Browser's user interface and JavaScript has no control on it. As other mention you can use accept attribute but that attribute hasn't been created for this purpose.

If the value of the type attribute is file, accept attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifier.

Answer 4

Image for example:

<input type="file" accept="image/*">

See this answer