From 2727d3c76fd54476ecc29fc01b6ce3fe8e33b582 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 13 Oct 2021 07:08:36 +0200 Subject: Prepare HTML section for Markdown conversion (#2628) * Remove summary classes * Remove useless spans * Remove notranslate * Fix element index page (cf en-US) * Align page vs en-US cf8bcd9 for CI * Remove hidden classes * remove ids * Fix notes - part 1 / n * Fix notes - part 2/2 * Fix warnings * fix dls and some other issues * Fix imgs and styles --- files/fr/web/html/element/input/file/index.html | 34 ++++++++++--------------- 1 file changed, 13 insertions(+), 21 deletions(-) (limited to 'files/fr/web/html/element/input/file/index.html') diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html index 101a6a2f1b..924ba06e65 100644 --- a/files/fr/web/html/element/input/file/index.html +++ b/files/fr/web/html/element/input/file/index.html @@ -9,18 +9,16 @@ translation_of: Web/HTML/Element/input/file ---
{{HTMLRef}}
-

Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript via l'API File.

+

Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript via l'API File.

{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}
- -

Valeur

L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété HTMLInputElement.files.

-
Note : - +
+

Note :

  1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript grâce à la propriété FileList.
  2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide ("").
    3. @@ -72,7 +70,9 @@ translation_of: Web/HTML/Element/input/file

    Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut accept indique que le fichier est de ce type. Lorsque capture vaut "user", cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut "environment", c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.

    -
    Note : capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.
    +
    +

    Note : capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.

    +

    {{htmlattrdef("files")}}

    @@ -139,18 +139,16 @@ translation_of: Web/HTML/Element/input/file </div> </form> -

    Ce fragment de code HTML produira le résultat suivant :

    {{EmbedLiveSample('Un_exemple_simple', 650, 60)}}

    -

    Note : Vous pouvez également trouver cet exemple sur GitHub — avec le code source et la démonstration.

    +

    Note : Vous pouvez également trouver cet exemple sur GitHub — avec le code source et la démonstration.

    Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <input type="file"> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.

    @@ -204,24 +202,20 @@ translation_of: Web/HTML/Element/input/file </div> </form> -

    Voici le résultat produit :

    {{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}

    -

    Note : Vous pouvez également consulter cet exemple sur GitHub — voir le code source et la démonstration live.

    +

    Note : Vous pouvez également consulter cet exemple sur GitHub — voir le code source et la démonstration live.

    Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).

    -

    Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable.

    -

    L'attribut accept ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.

    Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.

    @@ -245,7 +239,7 @@ input.value = "toto";

    Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété HTMLInputElement.files. On montre aussi quelques astuces.

    -

    Note : Le code source complet de cet exemple est disponible sur GitHub — file-example.html (voir la démonstration live associée). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.

    +

    Note : Le code source complet de cet exemple est disponible sur GitHub — file-example.html (voir la démonstration live associée). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.

    Tout d'abord, voici le fragment de code HTML utilisé :

    @@ -263,8 +257,7 @@ input.value = "toto"; </div> </form> -

    Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.

    @@ -331,7 +323,7 @@ var preview = document.querySelector('.preview'); input.style.opacity = 0;
    -

    Note : La propriété opacity est utilisée pour masquer l'élément <input> plutôt que visibility: hidden ou display: none. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.

    +

    Note : La propriété opacity est utilisée pour masquer l'élément <input> plutôt que visibility: hidden ou display: none. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.

    Ensuite, on ajoute un gestionnaire d'évènement à l'élément <input> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction updateImageDisplay() que nous décrirons juste après.

    -- cgit v1.2.3-54-g00ecf