web-dev-qa-db-fra.com

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

Comment puis-je internationaliser le texte du bouton du sélecteur de fichiers? Par exemple, ce que ce code présente à l'utilisateur:

 <input type="file" .../>
htmlinternationalizationdialog
45
mkoryak

Il est normalement fourni par le navigateur et difficile à modifier, donc le seul moyen de le contourner sera un hack CSS/JavaScript,

Voir les liens suivants pour quelques approches:

34
ChristopheD

Prendre du recul! Tout d'abord, vous supposez que l'utilisateur utilise une langue étrangère sur son appareil, ce qui n'est pas une hypothèse valable pour justifier la prise en charge du texte du bouton du sélecteur de fichiers et lui faire dire quoi vous le souhaitez.

Il est raisonnable de vouloir contrôler chaque élément de langue visible sur votre page. Le contenu du contrôle File Upload ne fait cependant pas partie du HTML. Il y a plus de contenu derrière ce contrôle, par exemple, dans WebKit, il indique également "Aucun fichier choisi" à côté du bouton.

Il existe des solutions de contournement très hacky 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 dira toujours "Parcourir ..." ou "Choisir un 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 fichier choisi ou à montrer que l'utilisateur n'a plus choisi de fichier
  • Beaucoup d'entre eux ne ressemblent en rien au contrôle natif, donc peuvent sembler étranges sur des 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 pleinement fonctionnel que son équivalent natif (et plus vous vous en tenez à supposer IE10 sur Windows 7, plus il s'écartera des autres combinaisons de navigateur et de système d'exploitation).
  • Les navigateurs modernes prennent en charge le glisser-déposer dans le contrôle de téléchargement de fichiers natif.
  • Certaines techniques peuvent déclencher des heuristiques dans les logiciels de sécurité comme une tentative potentielle de "détournement de clics" pour inciter l'utilisateur à télécharger le fichier.

Dévier des contrôles natifs est toujours une chose risquée, il existe une multitude de différents appareils que vos utilisateurs pourraient utiliser, et quelle que soit la solution de contournement que vous choisirez, vous ne l'avez pas testée sur chacun de ces appareils.

Cependant, il existe une raison encore plus importante 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, la boîte de dialogue de sélection de fichier elle-même. Une fois que l'utilisateur est soumis à traverser son système de fichiers ou à ne pas sélectionner un fichier à télécharger, il sera soumis aux paramètres régionaux du système d'exploitation hôte.

Êtes-vous sûr de rendre justice à votre utilisateur en s'écartant du contrôle natif, juste pour localiser le texte, quand dès qu'ils cliquent dessus, ils obtiendront tout de même les paramètres régionaux du système d'exploitation?

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

Désolé. :-(

-

Cette réponse s'adresse à ceux qui recherchent une justification et non pour localiser le contrôle de téléchargement de fichier.

14
Lee Kowalkowski

Vous obtenez la langue de votre navigateur pour votre bouton. Il n'y a aucun moyen de le modifier par programme.

13
Seb

Solution CSS pure:

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

source: http://tympanus.net/codrops

12
mb21

Je pourrais réaliser 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 "Télécharger" (texte personnalisé). En cliquant sur le bouton de téléchargement, la recherche de fichiers est lancée. Testé avec Chrome 25 & IE9.

2
Joy

Pour créer une solution de "bouton de navigation" personnalisée, essayez simplement de créer un bouton de navigation caché, un bouton ou un élément personnalisé et du Jquery. De cette façon, je ne modifie pas le "bouton de navigation" réel 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());
    });
});
2
Nimjox

beaucoup plus facile à 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"/>
2
Riajul Islam