Zmień opcję „Nie wybrano pliku”:

Mam przycisk „Wybierz plik” w następujący sposób (używam Jade, ale powinien być taki sam jak Html5):

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

W przeglądarce wyświetla się przycisk z tekstem „Nie wybrano pliku”. Chciałbym zmienić tekst „Nie wybrano pliku” na inny, np. „Nie wybrano wideo” lub „Proszę wybrać plik wideo”. Postępowałem zgodnie z pierwszymi sugestiami tutaj:

Nie chcę widzieć „nie wybrano pliku” w polu wejściowym pliku

Ale zrobienie tego nie zmieniło tekstu:

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

Czy ktoś może mi pomóc dowiedzieć się, gdzie jest problem?

Jestem prawie pewien, że nie możesz zmienić domyślnych etykiet na przyciskach, są one zakodowane na stałe w przeglądarkach (każda przeglądarka renderuje podpisy przycisków na swój sposób). Przeczytaj ten artykuł na temat stylizacji przycisków

Ukryj wejście za pomocą css, dodaj etykietę i przypisz ją do przycisku wejścia. będzie można kliknąć, a po kliknięciu otworzy okno dialogowe pliku.

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

Następnie, jeśli chcesz, nadaj etykietę przyciskowi.

Spróbuj tego, to tylko sztuczka

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

Jak to działa

To jest bardzo proste. element Label używa tagu „for” w celu odniesienia się do elementu formularza za pomocą id. W tym przypadku użyliśmy „img” jako klucza referencyjnego między nimi. Gdy to się stanie, za każdym razem, gdy klikniesz etykietę, automatycznie wywoła zdarzenie click elementu formularza, którym w naszym przypadku jest zdarzenie click elementu pliku. Następnie sprawiamy, że element pliku jest niewidoczny, używając display: none i nie visibility: hidden, aby nie tworzył pustej przestrzeni.

Ciesz się kodowaniem

http://jsfiddle.net/ZDgRG/

Zobacz powyższy link. Używam CSS, aby ukryć domyślny tekst i używam etykiety, aby pokazać, czego chcę:

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

Zgadza się, nie ma sposobu, aby usunąć to „nie wybrano pliku”, nawet jeśli masz listę wstępnie przesłanych plików.

Najprostsze rozwiązanie, które znalazłem (i działa na IE, FF, CR) jest następujące

1. Ukryj wprowadzone dane i dodaj przycisk „pliki”
2. następnie wywołaj przycisk „pliki” i poproś go o powiązanie przesyłania plików (w tym przykładzie używam 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;'>

Gotowe, działa idealnie :)

Fred

Ale jeśli spróbujesz usunąć tę wskazówkę

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

To nie zadziała. Oto moja mała sztuczka, aby to zrobić, spróbuj tytułu ze spacją. To będzie działać.:)

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

Coś takiego mogłoby zadziałać

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

Uwaga: Btn btn-primary to klasa przycisku ładowania początkowego. Jednak przycisk może wyglądać na zmęczony na miejscu. Mam nadzieję, że możesz to naprawić przez wbudowany css.

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

używając etykiety ze zmienionym tekstem etykiety

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

dodaj jquery

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

Po prostu zmień szerokość wejścia. Około 90 pikseli

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

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

i css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

Możesz to wypróbować w ten sposób:

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

Aby wyświetlić wybrany plik:

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

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

Dzięki @ unlucky13 za wybranie nazwy pliku

Oto działające skrzypce:

http://jsfiddle.net/eamrmoc7/

Pomoże Ci to zmienić nazwę dla „brak pliku wybierz zdjęcie profilowe”

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

Użyłbym „przycisku” zamiast „etykiety”, mam nadzieję, że to komuś pomoże.

Spowoduje to wyświetlenie przycisku, kliknięty przez użytkownika wyskakuje okno wyboru plików, po wybraniu pliku, automatycznie załaduje.

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

możesz użyć następującego kodu css do ukrycia (nie wybrano pliku)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

UPEWNIJ SIĘ, ŻE KOLOR PASUJE DO KOLORU TŁA

Dobry przykład (który obejmuje walidację typu pliku) pod adresem:

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

Jest to w zasadzie rozbudowana wersja pomysłu Amosa na użycie przycisku.

Wypróbowałem kilka powyższych sugestii bez powodzenia (ale może to ja).

Ponownie zamierzam wykonać konwersję pliku Excel przy użyciu

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