How to add file uploads function to a webpage in HTML ?
Adding file upload functionality to a webpage in HTML involves creating an input element of type “file” within a form element. By specifying the “enctype” attribute as “multipart/form-data” in the form, files can be uploaded to the server.
Examples of file uploads function to a webpage in HTML
Using Single File Upload
In this approach we use single file uploads in HTML, and use the <input type=”file”> element, allowing users to select and upload a single file to the server via a web form.
Syntax
<input type="file" id="myfile" name="myfile" />
Example 1: In this example we displays a file-select field enabling users to upload a single file to the server using the <input type=”file”> element within a form with enctype set to “multipart/form-data”.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 >Show File-select Fields</ h1 >
< h3 >
Show a file-select field which allows
only one file to be chosen:
</ h3 >
< form
action = "/action_page.php"
enctype = "multipart/form-data"
>
< label for = "myfile"
>Select a file:</ label
>
< input
type = "file"
id = "myfile"
name = "myfile"
/>
< br />< br />
< input type = "submit" />
</ form >
</ body >
</ html >
|
Output:
Using Multiple File Upload
In this approach we are using multiple file uploads in HTML, add the multiple attribute to the <input type=”file”> element. Use the enctype=”multipart/form-data” attribute in the form tag to ensure file data is read and sent to the server along with filenames.
Syntax
<input type="file" id="myfile" name="myfile" multiple>
Example : In this example we creates a file-select field allowing users to choose multiple files. The form includes the enctype=”multipart/form-data” attribute to handle file uploads, enhancing website functionality.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 >Show File-select Fields</ h1 >
< h3 >
Show a file-select field which allows
multiple files to be chosen:
</ h3 >
< form
action = "/action_page.php"
enctype = "multipart/form-data"
>
< label for = "myfile"
>Select a file:</ label
>
< input
type = "file"
id = "myfile"
name = "myfile"
multiple = "multiple"
/>
< br />< br />
< input type = "submit" />
</ form >
</ body >
</ html >
|
Output:
Last Updated :
11 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...