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:

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

Voir les liens suivants pour certaines approches:

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

Prendre du recul! Premièrement, vous supposez que l’utilisateur utilise un paramètre régional étranger sur son périphérique, ce qui n’est pas une supposition valable pour justifier la prise en charge du texte du bouton du sélecteur de fichiers et le faire dire ce que vous voulez.

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

Il existe de nombreuses solutions de contournement 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 un fichier”, et un téléchargement de fichier personnalisé ne sera pas annoncé en tant que contrôle de téléchargement de fichier, mais uniquement un bouton ou une entrée de texte.
Beaucoup d’entre eux n’arrivent 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, ce qui peut paraître étrange sur des périphériques non standard.
Le support du clavier est généralement médiocre.
Un composant d’interface utilisateur créé par un auteur ne peut jamais être aussi fonctionnel que son équivalent natif (et plus vous vous en sortez pour 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é en tant que tentative potentielle de «cliquetis» pour amener l’utilisateur à télécharger un fichier.

S’écarter des contrôles natifs est toujours une opération risquée, il existe une multitude de périphériques différents que vos utilisateurs pourraient utiliser, et quelle que soit la solution que vous choisissez, vous ne les aurez pas testés sur chacun de ces périphériques.

Cependant, il y a une raison encore plus grande pour laquelle toutes les tentatives échouent du sharepoint vue de l’expérience utilisateur: il y a encore plus de contenu non localisé derrière ce contrôle, le dialog de sélection de fichiers lui-même. Une fois que l’utilisateur est sujet à traverser son système de fichiers ou à ne pas sélectionner un fichier à télécharger, il sera soumis aux parameters régionaux du système d’exploitation hôte.

Etes-vous sûr de faire justice à votre utilisateur en vous écartant du contrôle natif, simplement pour localiser le texte, dès qu’il clique dessus, il va tout simplement obtenir les parameters régionaux du système d’exploitation?

Le mieux que vous puissiez faire pour vos utilisateurs est de vous assurer que vous disposez de conseils localisés adéquats concernant votre contrôle de saisie de fichier. (par exemple, étiquette de champ de formulaire, texte de conseil, texte d’info-bulle).

Pardon. 🙁

–

Cette réponse est pour ceux qui recherchent une justification pour ne pas localiser le contrôle de téléchargement de fichier.

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; }

  Choose a file (Click me)

Je pourrais réaliser un bouton en utilisant jQueryMobile avec le code suivant:

 Upload

Le code ci-dessus crée un bouton “Upload” (texte personnalisé). En cliquant sur le bouton de téléchargement, la navigation de fichier est lancée. Testé avec Chrome 25 et IE9.

Pour créer une solution personnalisée de «bouton de navigation», essayez simplement de créer un bouton de navigation masqué, un bouton ou un élément personnalisé et un fichier Jquery. De cette façon, je ne modifie pas le véritable “bouton de navigation” qui dépend de chaque navigateur / version. Voici un exemple.

HTML:

 My Custom Button

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").sortinggger("click"); $('#browser').change(function() { alert($("#browser").val()); }); });

beaucoup plus facile à utiliser