The HTML5 file API allows you to restrict which kind of files are accepted by simply setting the accept attribute on a file input, e.g.:
<input type="file" accept="image/jpeg">Specifying multiple MIME types separated by a comma (e.g. image/jpeg,image/png) or using wildcards (e.g. image/* for allowing all types of images) give you a quick and powerful way to restrict the type of files you want to select. Here’s an example for allowing any image or video:
<input type="file" accept="image/*,video*">By default, the file input lets the user select a single file. If you want to enable multiple file selection, simply add the multiple attribute:
<input type="file" multiple>You can then read all the selected files via the file input’s files array. See read file as dataUrl