it-swarm.com.de

Ändern Sie das "Keine Datei ausgewählt":

Ich habe eine Schaltfläche "Datei auswählen" wie folgt (Ich verwende Jade, aber es sollte dasselbe sein wie Html5):

 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 wählen Sie ein Video". Ich bin hier den ersten Vorschlägen gefolgt:

Ich möchte nicht "keine Datei ausgewählt" für ein Dateieingabefeld sehen

Der Text wurde dadurch jedoch nicht geändert:

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

Kann mir jemand helfen herauszufinden, wo das Problem liegt?

57
FranXh

Ich bin mir ziemlich sicher, dass Sie die Standardbeschriftungen von Schaltflächen nicht ändern können. Sie sind in Browsern hartcodiert (jeder Browser rendert die Schaltflächen auf eigene Weise). Schauen Sie sich diesen Button-Styling-Artikel an

10
Jeremy Thille

Blenden Sie die Eingabe mit css aus, fügen Sie eine Beschriftung hinzu und weisen Sie sie der Eingabeschaltfläche zu. Das Etikett kann angeklickt werden. Wenn Sie darauf klicken, wird der Dateidialog gestartet.

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

Wenn Sie möchten, gestalten Sie das Etikett dann als Schaltfläche.

166
SKManX

http://jsfiddle.net/ZDgRG/

Siehe obigen Link. Ich verwende css, um den Standardtext auszublenden, und ein Label, 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];
    }
};
15
Tommy Steimel

Versuchen Sie, dies 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 dies getan haben, löst jedes Mal, wenn Sie auf das Etikett klicken, automatisch das Elementklickereignis des Formulars aus, bei dem es sich in diesem Fall um das Dateielementklickereignis handelt. Dann machen wir das Dateielement unsichtbar, indem wir Anzeige: Keine und nicht Sichtbarkeit: Verborgen verwenden, damit kein leerer Raum entsteht. 

Viel Spaß beim Codieren

11
Odin

Richtig, es gibt keine Möglichkeit, diese "nicht ausgewählte Datei" zu entfernen, selbst wenn Sie eine Liste von Dateien haben, die vor dem Hochladen hochgeladen wurden.

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

  1. Verstecke deine Eingaben und füge eine "Dateien" -Schaltfläche hinzu
  2. rufen Sie dann die Schaltfläche 'files' auf und bitten Sie ihn, fileupload 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 fertig, funktioniert perfekt :)

Fred

11
Frederic

Aber wenn Sie versuchen, diesen Tooltip zu entfernen 

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

Das wird nicht funktionieren. Hier ist mein kleiner Trick, um das zu bearbeiten, versuche den Titel mit einem Leerzeichen. Es wird klappen.:)

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

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

6
Ifeanyi Chukwu
 .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>

3
Raj Chavan

So etwas könnte funktionieren

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

Sie können es so 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/

1
Satyadev
<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; 
}
1
Ir Calif

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-Tasten. Die Schaltfläche kann jedoch in der richtigen Position erscheinen. Hoffe, Sie können es per Inline-CSS beheben.

Dies hilft Ihnen, den Namen für "keine Datei zu wählen, um Profilbild auszuwählen" zu ändern.

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>
0
user6097020

etikett mit geändertem Etikettentext verwenden

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

jQuery hinzufügen

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>
0
kelvin kantaria

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

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

0
nwillo

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

Dies zeigt nur eine Schaltfläche an. Wenn der Benutzer darauf klickt, wird die Dateiauswahl eingeblendet und 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;" />
0
Amos