Ändern Sie die Option "Keine Datei ausgewählt":

84

Ich habe eine Schaltfläche "Datei auswählen" wie folgt (ich verwende Jade, aber es sollte mit HTML5 identisch sein):

 input(type='file', name='videoFile')

Im Browser wird eine Schaltfläche mit dem Text "Keine Datei ausgewählt" angezeigt. Ich möchte den Text "Keine Datei ausgewählt" in etwas anderes ändern, z. B. "Kein Video ausgewählt" oder "Bitte ein Video auswählen". Ich habe hier die ersten Vorschläge befolgt:

Ich möchte nicht, dass für ein Dateieingabefeld "Keine Datei ausgewählt" angezeigt wird

Dies änderte jedoch nichts am Text:

 input(type='file', name='videoFile', title = "Choose a video please")

Kann mir jemand helfen, herauszufinden, wo das Problem liegt?

html  button  file-upload  pug 
— FranXh
quelle
Hier finden Sie die Antwort stackoverflow.com/questions/12035400/…
— Mahmoud Farahat
1
@ MahmoudFarahat Ich möchte es nicht entfernen, ich möchte den Text ändern
— FranXh
Können Sie den Text nicht entfernen und ein Platzhalteretikett daneben platzieren?
— Roger Lipscombe
In einem anderen Beitrag gibt es eine wirklich ordentliche Antwort darauf. stackoverflow.com/a/21842275/3653494
— P-Bagels
Es ist sehr gut möglich: Schauen Sie sich diese schnelle Lösung an - enthält andere Dinge
— darga33

Antworten:

14

Ich bin mir ziemlich sicher, dass Sie die Standardbezeichnungen für Schaltflächen nicht ändern können. Sie sind in Browsern fest codiert (jeder Browser rendert die Schaltflächenbeschriftungen auf seine Weise). Lesen Sie diesen Artikel zum Stylen von Schaltflächen

— Jeremy Thille
quelle
5
Es ist nicht die Beschriftung auf der Schaltfläche, sondern die "Keine Datei ausgewählt" daneben. Wenn ich eine Datei auswähle, ändert sich diese von Keine Datei in Dateiname. Ich glaube, es sollte veränderbar sein.
— FranXh
@JeremyThille, weil Menschen Menschen sind.
— Amn
206

Blenden Sie die Eingabe mit CSS aus, fügen Sie eine Beschriftung hinzu und weisen Sie sie der Eingabetaste zu. Die Beschriftung kann angeklickt werden. Wenn Sie darauf klicken, wird der Dateidialog geöffnet.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Gestalten Sie das Etikett dann als Schaltfläche, wenn Sie möchten.

— SKManX
quelle
1
Dies funktioniert sogar in IE9, wo Sie das nicht ausblenden file inputund in JavaScript darauf klicken können. Vielen Dank!
— Huysentruitw
1
Das ist toll. Hackity Eleganz. Liebe es.
— Ben
3
Tolle Lösung, dies sollte die akzeptierte Antwort sein.
— Multitut
1
Tolle Lösung, es ermöglicht sogar eine einfache Möglichkeit, das Feld anzupassen
— SAFAD
8
Interessante HTML-Lösung, aber schlecht für die Benutzerfreundlichkeit. Der Benutzer sieht auch nach Auswahl einer Datei immer "Datei auswählen" oder eine gleichwertige Datei.
— Cthulhu
23

Versuchen Sie dies, es ist nur ein Trick

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

Wie es funktioniert

Es ist sehr einfach. Das Label-Element verwendet das "for" -Tag, um anhand der ID auf das Element eines Formulars zu verweisen. In diesem Fall haben wir "img" als Referenzschlüssel zwischen ihnen verwendet. Sobald Sie fertig sind, wird beim Klicken auf die Beschriftung automatisch das Element-Klick-Ereignis des Formulars ausgelöst, das in unserem Fall das Dateielement-Klick-Ereignis ist. Wir machen das Dateielement dann unsichtbar, indem wir display: none und not sichtbarkeit: hidden verwenden, damit kein leerer Raum entsteht.

Viel Spaß beim Codieren

— Odin
quelle
2
Sie können diese Antwort verbessern, indem Sie erklären, wie es funktioniert.
— user8397947
Es scheint, dass das Ziehen von Dateien nicht funktioniert, wenn Sie dies tun.
— fonZ
16

http://jsfiddle.net/ZDgRG/

Siehe obigen Link. Ich benutze CSS, um den Standardtext auszublenden, und benutze eine Beschriftung, um zu zeigen, was ich will:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};
— Tommy Steimel
quelle
12

Richtig, es gibt keine Möglichkeit, diese "Keine Datei ausgewählt" zu entfernen, selbst wenn Sie eine Liste von Dateien vor dem Hochladen haben.

Die einfachste Lösung, die ich gefunden habe (und die mit IE, FF, CR funktioniert), ist die folgende

  1. Blenden Sie Ihre Eingabe aus und fügen Sie eine Schaltfläche "Dateien" hinzu
  2. Rufen Sie dann die Schaltfläche "Dateien" auf und bitten Sie ihn, den Datei-Upload zu binden (in diesem Beispiel verwende ich JQuery).

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>
Erweitern Sie das Snippet

Es ist geschafft, funktioniert perfekt :)

Fred

— Frederic
quelle
7 

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">
Erweitern Sie das Snippet

— Ifeanyi Chukwu
quelle
Dies funktioniert sehr effektiv, da Text in der Nähe der Dateieingabe ausgeblendet wird.
— Immer ein Lernender
6

Aber wenn Sie versuchen, diesen Tooltip zu entfernen 

<input type='file' title=""/>

Das wird nicht funktionieren. Hier ist mein kleiner Trick, um dies zu tun. Versuchen Sie es mit einem Leerzeichen. Es wird klappen.:)

<input type='file' title=" "/>
— Simon
quelle
Ich habe in Chrome und allen Browsern getestet. Es funktioniert gut. Können Sie es bitte testen und überprüfen.
— Simon
4
Erneut in Chrome, Safari, Firefox getestet. Es funktioniert nicht.
— AdamInTheOculus
Ich checke in Chrome Version 56.0.2924.87 ein, es funktioniert einwandfrei. Welche Version verwenden Sie? @PantsMagee
— Simon
Es fügt nur Tooltip mit Text hinzu, den Sie titleals Attribut festgelegt haben, wie ich sehe
— Fjodor
3

So etwas könnte funktionieren

input(type='file', name='videoFile', value = "Choose a video please")
— Kevin Lynch
quelle
3

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

Hinweis: Btn btn-primary ist eine Klasse von Bootstrap-Schaltflächen. Der Knopf kann jedoch in seiner Position seltsam aussehen. Hoffe, Sie können es durch Inline-CSS beheben.

— Naeem Moavia Siddiqui
quelle
3 
 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});
.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>
Erweitern Sie das Snippet

— Raj Chavan
quelle
Wie würde ich den Text "Firmenlogo auswählen" unter der Schaltfläche und nicht auf der rechten Seite anzeigen lassen?
— Alex
2

Ändern Sie einfach die Breite der Eingabe. Etwa 90px

<input type="file" style="width: 90px" />

— nwillo
quelle
1
Es ist einfach und funktioniert gut. Nur die Breite beträgt 100px; :)
— Sachin Shah
2

Verwendung des Etiketts mit geändertem Etikettentext

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

füge jquery hinzu

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>
— Kelvin Kantaria
quelle
1 
<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

und die CSS

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}
— Ir Calif
quelle
1
Eingabe [Typ = "Datei"] {Farbe: transparent; Hintergrundfarbe: # F89406; Rand: 2px fest # 34495e; Breite: 100%; Höhe: 36px; Randradius: 3px; }
— Ir Calif
1

Sie können es folgendermaßen versuchen:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

So zeigen Sie die ausgewählte Datei an:

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

Vielen Dank an @ unlucky13 für den ausgewählten Dateinamen

Hier arbeitet Geige:

http://jsfiddle.net/eamrmoc7/

— Kittu
quelle
0

Auf diese Weise können Sie den Namen für "Keine Datei auswählen, um Profilbild auszuwählen" ändern.

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>
Der Knopf ist weg.
— Diansheng
Das hat gut funktioniert für mich. Die Schaltfläche war nicht mehr vorhanden, aber wenn Sie auf das Dialogfeld "Dateien öffnen" klicken, können Sie die Beschriftung so gestalten, dass sie wie die Schaltfläche aussieht. Der nervige Text "Keine Datei ausgewählt" wurde entfernt.
— NoBullMan
0

Ich würde "button" anstelle von "label" verwenden, hoffe das hilft jemandem.

Daraufhin wird nur eine Schaltfläche angezeigt. Wenn der Benutzer darauf klickt, wird die Dateiauswahl nach Auswahl der Datei automatisch hochgeladen.

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
— Amos
quelle
0

Es gibt ein gutes Beispiel (einschließlich Dateitypüberprüfung) unter:

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

Es ist im Grunde eine ausgefeilte Version von Amos 'Idee, einen Knopf zu benutzen.

Ich habe einige der oben genannten Vorschläge ohne Erfolg ausprobiert (aber vielleicht bin ich das).

Ich beabsichtige, eine Excel-Dateikonvertierung mit durchzuführen 

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
— DLyons
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.