2023如何在HTML表单中允许多个文件上传

 所属分类:web前端开发

 浏览:235次-  评论: 0次-  更新时间:2023-08-30
描述:更多教程资料进入php教程获得。 In this article, we will learn how to allow multiple files uploads in HTML for...
更多教程资料进入php教程获得。

如何在HTML表单中允许多个文件上传

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

我们使用多个属性,以允许在HTML表单中进行多个文件上传。多个属性适用于电子邮件和文件输入类型。

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 <input> element and the type of attribute is set to file.

语法

以下是在HTML表单中选择多个文件上传的语法。

<input type="file" name="name" multiple>

示例(使用多个属性)

以下是HTML表单中选择多个文件上传的示例程序。

<!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>

以下是上述示例程序的输出,其中在输入字段中未选择任何文件。

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

我们也可以选择尽可能多的文件。下面的输出显示我们选择的文件数量。

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.

语法

以下是在HTML表单中选择多个文件上传的语法。

<input type="file" name="name" multiple=>

Example

的中文翻译为:

示例

以下是在HTML表单中选择多个文件上传的示例程序。

<!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>

正如我们在输出中看到的,我们已经选择了四个文件进行上传。

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!