Wie ändere ich den Schaltflächentext von <input type = “file” />?

257
<input type="file" value="Browse" name="avatar" id="id_avatar" />

Ich habe versucht, das zu ändern value, aber es funktioniert nicht. Wie kann ich den Schaltflächentext anpassen?

user198729
quelle
Sprechen Sie über den Dateinamen oder den Schaltflächentext?
Artelius
Mögliches Duplikat von Wie benenne ich die HTML-Schaltfläche "Durchsuchen" um?
Ciro Santilli 法轮功 冠状 病 六四 事件 8

Antworten:

153

Verwenden Sie Bootstrap FileStyle , mit dem die Dateifelder von Formularen formatiert werden . Es ist ein Plugin für eine jQuery-basierte Komponentenbibliothek namens Twitter Bootstrap

Beispielnutzung:

Einschließen:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Über JavaScript:

$(":file").filestyle();

Über Datenattribute:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Fernando Kosh
quelle
Scheint nicht für mich zu arbeiten. Es werden weiterhin die Standardschaltflächen des Brors angezeigt. Die Demo unter github.com/markusslima/bootstrap-filestyle.git funktioniert ebenfalls nicht - alle Beispiele zeigen die Standardschaltflächen. Vermisse ich etwas
Ja.
7
@ Tony Uhh .... warum denkst du, dass Bootstrap nicht auch den "verrückten <img /> Hack" darunter verwendet? :-)
Andz
@Ya kannst du sagen, welcher Browser und welche Version? Jetzt auf Chrome Version 43.0.2357.130 (64-Bit) unter Linux getestet und alle Beispiele funktionieren einwandfrei.
Fernando Kosh
20
Das Werfen einer Javascript-Bibliothek (mit einem Plugin!) Auf ein so kleines Problem ist ein uneleganter Overkill.
MKaama
3
Abgestimmt. Es ist nicht einmal eine Antwort, sondern nur eine Problemumgehung, die eine zusätzliche Bibliothek benötigt. Die Antwort sollte beabsichtigen, das Renderverhalten für Browser zu ändern.
wdetac
108

Sie können stattdessen ein Bild einfügen und dies folgendermaßen tun:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : Wenn Sie in IE9 und IE10 den onClick in einer über Javascript eingegebenen Datei auslösen, wird das Formular als "gefährlich" gekennzeichnet und kann nicht mit Javascript gesendet werden. Es ist nicht sicher, ob es traditionell gesendet werden kann.

ParPar
quelle
5
Dies ist eine clevere Lösung. Könnten Sie dies nicht auch mit einem <button> -Element tun?
Code Commander
1
@Code Commander - Danke, und ja, Sie können es mit jedem gewünschten Element tun, aber das häufigste ist das <image> -Element.
Entfernen Sie
2
Einige mobile Browser deaktivieren das Auslösen von Dateieingabeklicks programmgesteuert. Insbesondere Android 4 für das Galaxy S III
Newshorts
Ich verwende <input type="file" innerhalb der asp.net Gridview-Zeile, deren Zeilen dynamisch hinzugefügt werden können. Es ist also ein echtes Problem, den entsprechenden Eingabe-Klick-Trigger (derselben Zeile) aufzurufen, während Sie auf ein Bild klicken! : /
Sohaiby
Ihre Lösung funktioniert nicht. Sie haben Rand, Rand, Polsterung und Hintergrundfarbe nicht festgelegt, sonst wäre es offensichtlich
yan bellavance
88

Blenden Sie die Dateieingabe aus. Erstellen Sie eine neue Eingabe, um ein Klickereignis zu erfassen und an die versteckte Eingabe weiterzuleiten:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
Erbsenpüree
quelle
Beim Einwerfen einer HTA-Datei im IE7-Modus musste ich die ;am Ende entfernen .
ATek
Großartig, Sie möchten Bootstrap nicht einschließen, um nur zwei Textwörter zu ändern, aber wie würden Sie es tun, wenn die Dateieingabe dynamisch erstellt würde?
Spargel
@asparism Verwenden Sie JavaScript, um das DOM zu bearbeiten, es auszublenden, indem Sie seinen Stil festlegen und before () verwenden, und fügen Sie das neue Eingabeelement hinzu?
MushyPeas
3
@MushyPeas ist der einfachste Weg. Ich habe versucht, mit CSS zu spielen, aber diese Lösung ist viel schneller und einfacher. danke
Mara
2
Das war auch für mich der einfachste Weg! Außerdem konnte ich die 'Mock'-Datei-Schaltfläche als eine von mehreren anderen Optionen für Formular-Schaltflächen STILEN - ohne mir Gedanken über die Anzeige der seltsam aussehenden Datei-Schaltfläche "Durchsuchen" machen zu müssen.
Harry Mantheakis
47

Der Text "Datei hochladen ..." ist vom Browser vordefiniert und kann nicht geändert werden. Die einzige Möglichkeit, dies zu umgehen, ist die Verwendung einer Flash- oder Java-basierten Upload-Komponente wie swfupload .

Pekka
quelle
3
Können Sie beweisen, dass es nicht geändert werden kann?
user198729
Oder indem Sie die Quellcodes der Browser durchsuchen, zumindest die Open Source-Codes.
Pekka
Dies könnte durch die Antwort (auf eine andere Frage, etwa "Warum wird der Wertinhalt 'VALUE =" C: \ someFile.txt "' für ein Eingabefeld vom Typ Datei 'TYPE =" FILE "' von ignoriert? der Browser? "): stackoverflow.com/questions/1342039
Peter Mortensen
23

Funktioniert perfekt auf allen Browsern Ich hoffe, es funktioniert auch für Sie.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Ändern Sie content: 'Select some files';mit dem gewünschten Text''

Wenn Sie nicht mit Firefox arbeiten, verwenden Sie dies anstelle der Eingabe:

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Code Schwarz
quelle
Funktioniert jedoch auf Safari
Cullub
Es funktioniert perfekt auf meinem FF 41.0.2. Sie haben Probleme mit der Browserkompatibilität. Informationen zum Minimieren des Problems finden Sie im CSS BOX MODEL.
Code Black
1
Das Problem ist wahrscheinlich, dass FF auf Gecko und nicht auf Webkit basiert. (meine beste Vermutung)
Cullub
2
<label id = "addButton" for = "Upload" style = "Hintergrundfarbe: # 000; Farbe: #fff; Polsterung: 4 Pixel; Randradius: 4 Pixel; Schriftfamilie: Monospace;" > Wählen Sie eine Datei </ label> <input id = "Upload" type = "file" multiple = "multiple" name = "_ photos" accept = "image / *" style = "sichtbarkeit: versteckt">
Code Black
4
OK danke! Schauen Sie sich diese JSFiddle an . Wenn Sie Ihre Antwort damit bearbeiten, denke ich, dass es einer Aufwertung wert ist :)
Cullub
10

Dies ist ein JQuery-Plugin zum Ändern des Schaltflächentextes eines Eingabedateielements.

Beispiel HTML:

<input type="file" id="choose-file" />

Beispiel JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Ergebnis:

Plugin Ergebnis

Datchung
quelle
9
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

mehr http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

websky
quelle
9

Einfach

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Mit Snippet bearbeiten]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

Ken Karlo
quelle
Versuchen Sie zu sehen, was ich hier gemacht habe jsfiddle.net
Ken Karlo
Danke, genau das, was ich wollte :)
Garth Baker
7

Ich denke, das ist was du willst:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 
Chit
quelle
3

BEARBEITEN : Ich sehe jetzt an den Kommentaren, dass Sie nach dem Schaltflächentext und nicht nach dem Dateipfad fragen. Mein Fehler. Ich werde meine ursprüngliche Antwort unten belassen, falls jemand anderes, der über diese Frage stolpert, sie so interpretiert, wie ich es ursprünglich getan habe.

2. BEARBEITUNG : Ich hatte diese Antwort gelöscht, weil ich festgestellt habe, dass ich die Frage falsch verstanden habe und meine Antwort nicht relevant war. Kommentare in einer anderen Antwort deuteten jedoch darauf hin, dass die Leute diese Antwort immer noch sehen wollten, sodass ich sie nicht lösche.

MEINE URSPRÜNGLICHE ANTWORT (Ich dachte, das OP fragt nach dem Pfad, nicht nach dem Schaltflächentext):

Dies wird aus Sicherheitsgründen nicht unterstützt . Der Opera-Webbrowser hat dies unterstützt, wurde jedoch entfernt. Überlegen Sie, was möglich wäre, wenn dies unterstützt würde. Sie können eine Seite mit einer Datei-Upload-Eingabe erstellen, sie mit einem Pfad zu einer vertraulichen Datei vorab füllen und das Formular dann automatisch mit dem durch das onloadEreignis ausgelösten Javascript senden . Dies würde zu schnell geschehen, als dass der Benutzer etwas dagegen unternehmen könnte.

Asaph
quelle
3

Verwenden Sie <label>für die Beschriftung

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Dies funktioniert ohne Javascript . Sie können das Etikett nach Herzenslust beliebig komplex dekorieren. Wenn Sie auf das Etikett klicken, wird der Klick automatisch zur Dateieingabe umgeleitet. Die Dateieingabe selbst kann mit jeder Methode unsichtbar gemacht werden. Wenn Sie möchten, dass die Beschriftung wie eine Schaltfläche angezeigt wird, gibt es viele Lösungen, z.

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
MKaama
quelle
2

Nur CSS & Bootstrap-Klasse

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>
mahmood kabi
quelle
1
  1. Davor <input type="file">, ein Bild hinzufügen , und <input style="position:absolute">es wird den Raum besetzt von<input type="file">
  2. Verwenden Sie das folgende CSS für das Dateielement

    position:relative;  
    opacity:0;  
    z-index:99;
Bibaswann Bandyopadhyay
quelle
0

Wenn Sie Schienen verwenden und Probleme beim Anwenden haben, möchte ich einige Tipps aus der ursprünglichen Antwort von @Fernando Kosh hinzufügen

  • Download-Datei zip und kopieren Sie die Datei bootstrap-filestyle.min.js ke Ordner app / assets / javascripts /
  • Öffnen Sie Ihre application.js und fügen Sie diese Zeile unten hinzu

    // = Bootstrap-Filestyle.min erforderlich

  • Öffnen Sie Ihren Kaffee und fügen Sie diese Zeile hinzu

    $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Ihr Text hier", icon: false});

widjajayd
quelle
0

Sie können einfach einen CSS-Trick hinzufügen. Sie brauchen kein Javascript oder mehr Eingabedateien und ich behalte das vorhandene Wertattribut . Sie müssen nur CSS hinzufügen . Sie können diese Lösung ausprobieren.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }
<input type="file" class="btn-file-upload" value="Uploadfile" />

Udara Kasun
quelle
0

Hier ist eine Möglichkeit, den Text einer Eingabe mit Dateityp, reinem HTML und Javascript zu "ändern":

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>
IntelarX
quelle
0

Für mich funktioniert der benutzerdefinierte Text mit Bootstrap-Filestyle nicht . Es hilft bei der Dekoration von Knöpfen, aber es ist seltsam, den Text zu ändern, bevor ich mit CSS ringe. Ich versuche Folgendes:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle rendert die Komponente als span mit einer Klasse namens butonText. Wenn Sie also ein Dokument laden, ändern Sie einfach den Text. einfach richtig und es muss auf allen Browsern funktionieren.

Prost

Boris Ch.F.
quelle
0

Ich habe es für mein Projekt so gemacht:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Khapi
quelle
-1

Dies ist eine alternative Lösung, die Ihnen möglicherweise helfen kann. Dadurch wird der Text, der außerhalb der Schaltfläche angezeigt wird, ausgeblendet und mit der Hintergrundfarbe des Div gemischt. Dann können Sie dem Div einen Titel geben, den Sie mögen.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>
Jarimos
quelle
In Chrome 39 werden sowohl der Text UPLOAD IMAGE als auch die Schaltfläche <input> angezeigt. Vielleicht hat sich der Umgang von Chrome mit Dateieingaben geändert, seit Sie dies gepostet haben?
EricP
@ Yan-Bellavance was machst du? Wenn Sie der Meinung sind, dass eine Antwort falsch oder nicht hilfreich ist, stimmen Sie ab, aber verunstalten Sie sie in keiner Weise!
Kaiido