Cómo validar en HTML5 para permitir solo en 'input type = "file"' JPG, GIF o PNG?

Question

Duplicar posibles:
Limit file format when using <input type=“file”>?

Tengo que utilizar el atributo HTML 5 pattern para permitir sólo los archivos PNG JPG, GIF y en un elemento de <input type="file">.

que actualmente tienen este patrón, pero no está funcionando:

<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)"> 

Este patrón de expresión no es compatible con HTML 5? ¿Cómo puedo probar patrones de expresiones regulares de HTML5 válidos?

Best Regards,

Answer 1

intentar algo así como

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" /> 

Haga clic here for the latest browser compatibility table

Demostración en directo here

para seleccionar sólo los archivos de imagen, se puede utilizar esta accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" /> 

Demostración en directo here

Sólo gif, se le aparecen JPG y PNG, captura de pantalla de la versión Chrome 44