JavaScript File API, Blobs and FileReaders Selecting multiple files and restricting file types
Example
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
