Select Only Images for upload through browse button

Question

Hi friends,

I want to make a file upload form.

But my confusion is that when i put file element in html its allow all types of files to select.

I want that browse button will only allow the images to select from the file system.

Actually it should display only images of the file system.

Thanks in advance.

Answer 1

Attribute "accept" with list of MIME types, does not supported by any browser.

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

You can sort out file extension with JS, or try http://swfupload.org/

Answer 2

Generally speaking, file uploads should be validated server-side as the 'accept' attribute is not fully supported by the major browsers. Example below:

$accept = array('jpg','png','gif','bmp');
$extension = substr($_FILES['file']['name'],strrpos($_FILES['file']['name'],'.')+1);

if(!in_array($extension,$accept)){
  // If the extension is not allowed show an error, else, the file type is valid
  echo 'Not a valid file extension';
}

Answer 3

Uploadify will work for you. It allows you to specify which file types are visible for the user to choose. It can also allow the user to upload multiple files at once if you need them to. All files that are uploaded are showed in a queue with progress bars and are removed from the queue when they are finished uploading. I highly recommend it.