Home > Web Front-end > HTML Tutorial > How to allow multiple file uploads in HTML form

How to allow multiple file uploads in HTML form

PHPz
Release: 2023-08-28 20:25:03
forward
1022 people have browsed it

How to allow multiple file uploads in HTML form

In this article, we will learn how to allow multiple files uploads in HTML forms.

We use multiple attributes to allow multiple file uploads in the HTML form. Several properties are available for email and file input types.

If you want to allow a user to upload the file to your website, you need to use a file upload box, also known as a file, select box. This is created using the element and the type of attribute is set to file.

grammar

The following is the syntax for selecting multiple files to upload in an HTML form.

<input type="file" name="name" multiple>
Copy after login

Example (using multiple attributes)

The following is a sample program for selecting multiple files to upload in an HTML form.

<!DOCTYPE html>
<html>
<head>
   <title>Upload multiple files</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form>
      <input type="file" name="name" multiple><br><br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copy after login

The following is the output of the above example program where no file is selected in the input field.

We have chosen only one file in the input field. Below is the output shows the file, we have chosen.

We can also select as many files as we want. The output below shows the number of files we selected.

Using ‘multiple’ Attribute with Values ​​of Multiple Files

The below syntax work same as the above-mentioned syntax. We assign ‘multiple’ attribute with the value of multiple for selecting multiple files in the input field.

grammar

The following is the syntax for selecting multiple files to upload in an HTML form.

<input type="file" name="name" multiple=>
Copy after login
The Chinese translation of

Example

is:

Example

The following is a sample program for selecting multiple files to upload in an HTML form.

<!DOCTYPE html>
<html>
<head>
   <title>Upload multiple files</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form>
      <input type="file" name="name" multiple="multiple"><br><br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copy after login

As we can see in the output, we have selected four files for upload.

The above is the detailed content of How to allow multiple file uploads in HTML form. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template