JavaScript Selecting multiple files and restricting file types


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