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

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

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

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.

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

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 .

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

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:

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

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>

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

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.

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

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>

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;

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

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

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>

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

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

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>