How to specify the type of files that server accepts in HTML5 ?

Last Updated : 30 Jan, 2024

In this article, we will learn how to specify the types of files that the server accepts in HTML5. The <input> accept attribute is used to specify the type of file that the server accepts. This attribute can be used with <input type=”file”> element only. This attribute is not used for validation tools because file uploads should be validated on the Server.

We will add each specific file one by one.

First, we will start by using an MS Office file. We will use the ‘accept’ attribute to specify types of files.

<input type="File" name="" accept=".doc, .docx">

To specify the video file, we will use the following code.

<input type="File" name="" accept="video/*">
Note: The * is the wild card, and it means that it accepts all video formats.

To specify the text or PDF files, we use the following code.

<input type="File" name="" accept=".pdf, .txt">

To specify the Audio file, we will use the following code.

<input type="File" name="" accept="audio/*">

To specify the Image file, we will use the following code.

<input type="File" name="" accept="image/*">

To specify the specific png or jpeg file, we will use the following code.

<input type="File" name="" accept=".png, .jpg, .jpeg">

We can combine multiple file types. If we want all the Audio and Video formats and png format for Images and Pdfs.

<input type="File" name="" accept="video/*, audio/*, .png, .pdf">

Example: This example shows how to specify the type of files that server accepts in HTML5.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>To specify the type of file</title>
</head>
 
<body>
    <form>
        <label>Select a MSWord file:</label>
        <input type="File" name="" accept=".doc, .docx"><br><br>
 
        <label>Select an Video file:</label>
        <input type="File" name="" accept="video/*"><br><br>
 
        <label>Select a Pdf or Text file:</label>
        <input type="File" name="" accept=".pdf, .txt"><br><br>
 
        <label>Select an Audio file:</label>
        <input type="File" name="" accept="audio/*"><br><br>
 
        <label>Select an Image file:</label>
        <input type="File" name="" accept="image/*"><br><br>
 
        <label>Select a Png or Jpeg file:</label>
        <input type="File" name="" accept=".png, .jpg, .jpeg"><br><br>
 
        <label>Select a Multiple file Types:</label>
        <input type="File" name="" accept="video/*, audio/*, .png, .pdf">
        <br><br>
 
        <input type="Submit" name="">
    </form>
</body>
 
</html>