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

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?

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

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.

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

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

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

Es ist geschafft, funktioniert perfekt :)

Fred

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

So etwas könnte funktionieren

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

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.

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

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

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

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>

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

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/

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>

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

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>