Bouton de téléchargement de fichier d'étiquetage

vous obtenez le langage de votre navigateur pour votre bouton. Il n'y a aucun moyen de le changer programmatiquement.

Prendre du recul! Tout d'abord, vous supposez que l'utilisateur utilise une locale étrangère sur leur périphérique, ce qui n'est pas une supposition sonore pour justifier la prise en charge du texte du bouton du sélectionneur de fichier, et le faire dire ce que vous le souhaitez.

il est raisonnable que vous vouliez contrôler chaque élément du langage visible sur votre page. Le contenu du contrôle de téléchargement de fichier ne fait pas partie du HTML cependant. Il y a plus de contenu derrière ce contrôle, car par exemple, dans WebKit, il est aussi indiqué "aucun fichier choisi" à côté du bouton.

il y a des solutions très loufoques qui tentent cela (par exemple comme celles mentionnées dans la réponse de @ChristopheD), mais aucune ne réussit vraiment:

• pour un lecteur d'écran, le contrôle de fichier indiquera toujours "parcourir..."ou" choisir fichier", et un téléchargement de fichier personnalisé ne sera pas annoncé comme un contrôle de téléchargement de fichier, mais juste un bouton ou une entrée de texte.
• Beaucoup d'entre eux ne parviennent pas à afficher le choisi fichier, ou de montrer que l'utilisateur n'a plus choisi un fichier
• beaucoup d'entre eux ne ressemblent en rien au contrôle natif, donc pourraient sembler étranges sur les appareils non standard.
• la prise en charge du clavier est généralement médiocre.
• un composant D'interface utilisateur créé par l'auteur ne peut jamais être aussi fonctionnel que son équivalent natif (et plus vous le faites se comporter pour supposer IE10 sur Windows 7, Plus il s'écartera d'un autre navigateur et système d'exploitation combinaison.)
• les navigateurs modernes prennent en charge le drag & drop dans le contrôle de téléchargement de fichiers natifs.
• certaines techniques peuvent déclencher des heuristiques dans le logiciel de sécurité comme une tentative potentielle de "click-jacking" pour piéger l'utilisateur dans le fichier de téléchargement.

dévier des contrôles natifs est toujours une chose risquée, il y a toute une série d'appareils différents que vos utilisateurs peuvent utiliser, et quelle que soit la solution que vous choisissez, vous ne l'aurez pas testé dans chacun des ces dispositifs.

cependant, il y a une raison encore plus grande pour laquelle toutes les tentatives échouent du point de vue de L'expérience utilisateur: il y a encore plus de contenu non localisé derrière ce contrôle, le dialogue de sélection de fichier lui-même. Une fois que l'utilisateur est soumis à traverser leur système de fichiers ou quoi de ne pas sélectionner un fichier à télécharger, ils seront soumis à la locale du système d'exploitation hôte.

Êtes-vous sûr que vous faites justice à votre Utilisateur en déviant du contrôle natif, juste pour localisent le texte, quand dès qu'ils le cliqueront, ils vont juste obtenir la locale du système D'exploitation de toute façon?

le mieux que vous puissiez faire pour vos utilisateurs est de vous assurer que vous disposez d'une orientation localisée adéquate autour de votre contrôle d'entrée de fichier. (par exemple, étiquette de champ de formulaire, texte de conseil, texte de tooltip).

Désolé. :-(

--

cette réponse est pour ceux qui cherchent une justification pour localiser le contrôle de téléchargement de fichiers.

Pure CSS solution:

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file (Click me)</label>

je pourrais obtenir un bouton en utilisant jQueryMobile avec le code suivant:

<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>

le code ci-dessus crée un bouton "Upload" (texte personnalisé). En cliquant sur le bouton de téléchargement, la consultation du fichier est lancée. Testé avec Chrome 25 & IE9.

pour créer une solution "browse button" personnalisée, essayez simplement de créer un bouton de navigation caché, un bouton ou un élément personnalisé et quelques Jquery. De cette façon, je ne modifie pas le véritable "browse button" qui dépend de chaque navigateur/version. Voici un exemple.

HTML:

<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>

CSS:

#import {
  margin: 0em 0em 0em .2em;
  content: 'Import Settings';
  display: inline-block;
  border: 1px solid;
  border-color: #ddd #bbb #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 700;
  font: bold 12px/1.2 Arial,sans-serif !important;
  /* fallback */
  background-color: #f9f9f9;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}

.hideMe{
    display: none;
}

JS:

$("#import").click(function() {
    $("#browser").trigger("click");
    $('#browser').change(function() {
            alert($("#browser").val());
    });
});

beaucoup plus facile de l'utiliser

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>