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>
|
Output: