Restrict File Upload Selection to Specific Types

Limit file format when using input type= file ?

Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.

But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box provided by the user's browser/OS. For example,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

restrict file upload selection to specific types

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

If you don't have access to the backend have a look at a flash based solution like SWFUpload.

See more on this here: File input 'accept' attribute - is it useful?

HTML5 - Restrict file upload

You can't restrict other file types in html5 file input, if user select other files it allow to select. Attribute 'accept' just give hint to user about supported file types.

input type= file limit selectable files by extensions

Honestly, the best way to limit files is on the server side. People can spoof file type on the client so taking in the full file name at server transfer time, parsing out the file type, and then returning a message is usually the best bet.

How to restrict file extension in operating System dialog box from HTML form

In HTML5 you can use "accept" attribute in the input[type=file] tag. For example:

<form action="" method="POST" " enctype="multipart/form-data">    
    <input type="file" name="files" accept="image/jpeg,image/png,image/gif/>    
    <input type="submit" name="upload" value="Upload" placeholder="Only .jpg/.jpeg files support."/>    
</form>

How to allow input type= file to accept only image files?

Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

HTML Input type file to support only drag and drop but restrict file browse and upload

Maybe something like this would work ((click)="$event.preventDefault()"):

<input type="file" class="someCssClass" (drop)="onImageDrop($event)" 
   (click)="$event.preventDefault()" required>

If you want to make it a bit better for the user, make a function that shows an error/explanation at the same time it is cancelling the event.

Restrict File Types In File Upload Dialog

If you want to use accept attribute you should set there correct mime types:
accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff"
That is for images. But it does not work in IE and some problems could be with FF (people say that it supports only a part of mime types)

For similar task I'm using SWFUpload. You can specify a list of allowed files there and it will show only those files in open file dialog. ~~Here you can see its demos~~

Upd: as mentioned by @Nis, demos are now included into source package:

We have provided several simple demos to show how SWFUpload works.
These demos are not intended as project templates but as
demonstrations of basic features and methods for implementing
SWFUpload. They are included in the source package.

How to restrict file type in FileUpload control

No, in web you can't from client side, evidently from server side you can do amazing things.
For this kind of thing, programmers normally use Activex, flash or the like.

Restrict file upload type to only Image

This accept attribute is a HTML5 feature and so is unsupported by a lot of browsers.

I'm afraid that, as long as I remember, the only other way to get a better file upload dialog (filetype filters, multiple files...) is to use a Flash object.