Maison > Article > interface Web > Comment sélectionner plusieurs fichiers à l'aide des balises d'entrée HTML ?

Comment sélectionner plusieurs fichiers à l'aide des balises d'entrée HTML ?

WBOYavant: 2023-08-23 21:01:021288parcourir

Comment sélectionner plusieurs fichiers à laide des balises dentrée HTML ?

La balise d'entrée HTML est un outil puissant qui permet aux développeurs de créer des pages Web dynamiques. Une fonctionnalité utile de la balise d'entrée est la possibilité de sélectionner plusieurs fichiers à la fois.

La balise d'entrée HTML est un élément couramment utilisé pour créer des formulaires Web et permettre aux utilisateurs d'interagir avec des applications Web. L'un des cas d'utilisation les plus courants des balises d'entrée est une sélection de fichiers dans laquelle un utilisateur peut choisir un ou plusieurs fichiers à télécharger.

La balise d'entrée en HTML possède divers attributs qui nous permettent de personnaliser le comportement de la balise. L'attribut le plus couramment utilisé pour la sélection de fichiers est l'attribut "type" avec la valeur "file". Cet attribut indique au navigateur que l'élément d'entrée est utilisé pour sélectionner un fichier.

Syntaxe

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

Dans la syntaxe ci-dessus −

La balise input est utilisée pour créer un champ de saisie utilisateur sur une page Web.
L'attribut type spécifie le type de champ de saisie. Dans ce cas, nous utilisons type="file" pour créer un champ de téléchargement de fichier.
L'attribut name spécifie le nom du champ de saisie du fichier. Ce nom sera utilisé pour identifier le champ de saisie du fichier lors de la soumission du formulaire.
L'attribut multiple spécifie que l'utilisateur peut sélectionner plusieurs fichiers à télécharger.

Création d'une balise d'entrée HTML pour les téléchargements de fichiers

Pour créer une balise d'entrée HTML pour les téléchargements de fichiers permettant aux utilisateurs de sélectionner plusieurs fichiers, nous utiliserons le code HTML suivant -

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

Dans cet exemple, nous utilisons l'attribut de type "file" pour créer une balise d'entrée pour les téléchargements de fichiers. Nous spécifions également un attribut de nom pour la balise d'entrée afin que nous puissions identifier les fichiers téléchargés côté serveur.

Ajout d'étiquettes à la balise d'entrée

C'est une bonne pratique d'ajouter une étiquette à la balise d'entrée du fichier afin que les utilisateurs sachent quel type de fichiers ils doivent télécharger. Voici un exemple de la façon d'ajouter une étiquette à la balise d'entrée du fichier -

<label for="fileUpload">Choose the files to upload:</label>
<input type="file" id="fileUpload" name="files[]" multiple>

Dans cet exemple, nous utilisons l'attribut "for" de la balise label pour lier l'étiquette à la balise d'entrée du fichier. Nous utilisons également l'attribut "id" de la balise d'entrée pour la faire correspondre avec l'étiquette.

Style du champ de saisie du fichier

L'apparence par défaut du champ de saisie du fichier semble peu attrayante et peut ne pas correspondre à la conception du site Web. Nous utilisons donc le CSS pour styliser le champ de saisie du fichier.

Exemple 1

Voici un exemple de champ de saisie de fichier de base avec plusieurs attributs.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
   </style>
</head>
   <body>
      <h3>Basic file input field with multiple attributes</h3>
      <p> You can choose multiple files below
      <form method="post" action="upload.php" enctype="multipart/form-data">
         <label for="fileUpload">Choose files:</label>
         <input type="file" id="fileUpload" name="files[]" multiple>
         <input type="submit" name="submit" value="Submit">
      </form>
   </body>
</html>

Exemple 2

Voici un autre exemple de champ de saisie de fichier avec un style personnalisé.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .file-upload {
         overflow: hidden;
         display: inline-block;
         background-color: #009688;
         color: #fff;
         padding: 10px 20px;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
      }
      .file-upload input[type=file] {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         opacity: 0;
         cursor: pointer;
      }
      .submit-btn{
         display: inline-block;
         background-color: #544000;
         color: #fff;
         padding: 10px;
         width:125px;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
      }
   </style>
</head>
   <body>
      <h3>File input field with custom styling</h3>
      <form method="post" action="upload.php" enctype="multipart/form-data">
         <label class="file-upload"> Choose Files
            <input type="file" name="files[]" multiple>
         </label> <br>
         <input class="submit-btn" type="submit" name="submit" value="Submit">
      </form>
   </body>
</html>

Conclusion

Dans cet article, nous avons expliqué comment sélectionner plusieurs fichiers à l'aide de la balise d'entrée HTML. En ajoutant l'attribut multiple à la balise d'entrée, les utilisateurs peuvent sélectionner plusieurs fichiers à télécharger. Nous avons également montré comment styliser le champ de saisie du fichier. Avec ces techniques, vous pouvez créer une fonctionnalité de téléchargement de fichiers conviviale pour l'application Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html for select using Attribute default this input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment réduire une image en utilisant CSS pour la rendre réactiveArticle suivant：Comment réduire une image en utilisant CSS pour la rendre réactive

Articles Liés

Voir plus