wake-up-neo.com

Schaltfläche zum Hochladen der Datei

Wie kann ich den Schaltflächentext der Dateiauswahl internationalisieren? Zum Beispiel, was dieser Code dem Benutzer präsentiert:

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

Es wird normalerweise vom Browser bereitgestellt und ist schwer zu ändern. Der einzige Ausweg ist ein CSS/JavaScript-Hack.

Unter den folgenden Links finden Sie einige Ansätze:

34
ChristopheD

Geh einen Schritt zurück! Erstens gehen Sie davon aus, dass der Benutzer ein fremdes Gebietsschema auf seinem Gerät verwendet. Dies ist keine solide Annahme, um die Übernahme des Schaltflächentexts der Dateiauswahl zu rechtfertigen und zu veranlassen, was du willst es.

Es ist sinnvoll, dass Sie alle auf Ihrer Seite sichtbaren Sprachelemente steuern möchten. Der Inhalt des Steuerelements zum Hochladen von Dateien ist jedoch nicht Bestandteil des HTML-Codes. Hinter diesem Steuerelement steckt mehr Inhalt, z. B. in WebKit, und neben der Schaltfläche wird "Keine Datei ausgewählt" angezeigt.

Es gibt sehr knifflige Problemumgehungen, die dies versuchen (z. B. die in der Antwort von @ ChristopheD genannten), aber keine davon ist wirklich erfolgreich:

  • Für einen Bildschirmleser sagt das Dateisteuerelement weiterhin "Durchsuchen ..." oder "Datei auswählen", und ein benutzerdefinierter Dateiupload wird nicht als Steuerelement für den Dateiupload angekündigt, sondern nur als Schaltfläche oder Texteingabe.
  • Viele von ihnen zeigen die ausgewählte Datei nicht an oder zeigen nicht an, dass der Benutzer keine Datei mehr ausgewählt hat
  • Viele von ihnen sehen nicht wie das native Steuerelement aus, sodass sie auf Nicht-Standardgeräten möglicherweise seltsam aussehen.
  • Die Tastaturunterstützung ist normalerweise schlecht.
  • Eine vom Autor erstellte UI-Komponente kann niemals so voll funktionsfähig sein wie ihre native Entsprechung (und je näher Sie dem Verhalten von IE10 unter Windows 7 kommen, desto mehr weicht sie von anderen Browser- und Betriebssystemkombinationen ab).
  • Moderne Browser unterstützen Drag & Drop in das native Steuerelement zum Hochladen von Dateien.
  • Einige Techniken können Heuristiken in Sicherheitssoftware auslösen, um den Benutzer zum Hochladen von Dateien zu verleiten.

Es ist immer riskant, von den systemeigenen Steuerelementen abzuweichen. Es gibt eine ganze Reihe unterschiedlicher Geräte, die Ihre Benutzer verwenden könnten. Unabhängig von der gewählten Problemumgehung haben Sie sie nicht auf jedem dieser Geräte getestet.

Es gibt jedoch einen noch größeren Grund, warum alle Versuche aus der Sicht der Benutzererfahrung fehlschlagen: Es gibt noch mehr nicht lokalisierte Inhalte hinter diesem Steuerelement, dem Dateiauswahldialog selbst. Sobald der Benutzer sein Dateisystem durchquert oder eine hochzuladende Datei nicht mehr auswählt, wird das Gebietsschema des Host-Betriebssystems verwendet.

Sind Sie sicher, dass Sie Ihrem Benutzer gerecht werden, indem Sie von der systemeigenen Steuerung abweichen, nur um den Text zu lokalisieren, wenn er ohnehin nur das Gebietsschema des Betriebssystems erhält, sobald er darauf klickt?

Das Beste, was Sie für Ihre Benutzer tun können, ist sicherzustellen, dass Sie über eine angemessene, lokalisierte Anleitung für Ihre Dateieingabesteuerung verfügen. (z. B. Formularfeldbezeichnung, Hinweistext, QuickInfo-Text).

Es tut uns leid. :-(

-

Diese Antwort richtet sich an Personen, die nach einer Rechtfertigung suchen , die das Steuerelement zum Hochladen von Dateien nicht lokalisiert .

14
Lee Kowalkowski

Sie erhalten die Sprache Ihres Browsers für Ihre Schaltfläche. Es gibt keine Möglichkeit, dies programmgesteuert zu ändern.

13
Seb

Reine CSS-Lösung:

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

quelle: http://tympanus.net/codrops

12
mb21

Mit jQueryMobile konnte ich eine Schaltfläche mit folgendem Code erreichen:

<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;"/>

Über dem Code wird eine Schaltfläche "Hochladen" (benutzerdefinierter Text) erstellt. Durch Klicken auf die Schaltfläche zum Hochladen wird die Dateisuche gestartet. Getestet mit Chrome 25 & IE9.

2
Joy

Um eine benutzerdefinierte "Schaltfläche zum Durchsuchen" -Lösung zu erstellen, versuchen Sie einfach, eine verborgene Schaltfläche zum Durchsuchen, eine benutzerdefinierte Schaltfläche oder ein Element und eine JQuery zu erstellen. Auf diese Weise ändere ich nicht die aktuelle Schaltfläche "Durchsuchen", die von jedem Browser/jeder Version abhängt. Hier ist ein Beispiel.

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

viel einfacher zu benutzen

<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