Show only image files In input type file browse window? [duplicate]

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/