Menu
Possible Duplicate:
Limit file format when using <input type=“file”>?
I need to use the HTML5 pattern attribute to only allow JPG, GIF and PNG files in a <input type="file"> element.
I currently have this pattern, but it is not working:
<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)"> This regex pattern is not compatible with HTML5? How can I test for valid HTML5 regex patterns?
855
Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format.
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
Definition and Usage. The accept attribute specifies a filter for what file types the user can pick from the file input dialog box. Note: The accept attribute can only be used with <input type="file"> .
Try something like
<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" /> Click here for the latest browser compatibility table
Live demo here
To select only image files, you can use this accept="image/*"
<input type="file" name="my-image" id="image" accept="image/*" /> Live demo here
Only gif, jpg and png will be shown, screen grab from Chrome version 44
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
