Jak sprawdzić poprawność w HTML5, aby zezwolić tylko w 'input type = "file"' JPG, GIF lub PNG?

Question

Powiel możliwe:
Limit file format when using <input type=“file”>?

muszę użyć atrybutu HTML5 pattern aby umożliwić tylko JPG, GIF i PNG w elemencie <input type="file">.

Obecnie mam ten wzór, ale to nie działa:

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

Ten wzór regex nie jest zgodna z HTML5? Jak mogę przetestować poprawne wzory regex HTML5?

Pozdrawiam,

Answer 1

Spróbuj coś

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

Kliknij here for the latest browser compatibility table

żywo demo here

Aby wybrać tylko pliki graficzne, można użyć tej accept="image/*"

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

demo żywo here

Tylko gif, jpg i png zostaną pokazane, grab ekranu z wersji Chrome 44