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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...