Zmień opcję „Nie wybrano pliku”:

Question 1

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?

Question 2

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

Question 3

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.

Question 4

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

Question 5

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

Question 6

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

Ukryj wprowadzone dane i dodaj przycisk „pliki”
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;'>

Rozwiń fragment

Gotowe, działa idealnie :)

Fred

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

Rozwiń fragment

Question 8

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

Question 9

Coś takiego mogłoby zadziałać

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

Question 10

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.

Question 11

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

Rozwiń fragment

Question 12

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>

Question 13

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

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

Question 14

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

Question 15

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/

Question 16

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>

Question 17

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

Question 18

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

Question 19

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>

Answer 1

90

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?

html button file-upload pug FranXh
źródło

znajdź odpowiedź tutaj stackoverflow.com/questions/12035400/…

Mahmoud Farahat

1

@MahmoudFarahat Nie chcę tego usuwać, chcę zmienić tekst

FranXh Kwietnia

Nie możesz usunąć tekstu i umieścić obok niego etykietę zastępczą?

Roger Lipscombe

W innym poście jest naprawdę schludna odpowiedź. stackoverflow.com/a/21842275/3653494

P-Bagels

jest to bardzo możliwe: sprawdź to szybkie rozwiązanie - zawiera inne rzeczy, po prostu przewiń do dołu CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7

darga33

Answer 2

znajdź odpowiedź tutaj stackoverflow.com/questions/12035400/…

Mahmoud Farahat

Answer 3

1

@MahmoudFarahat Nie chcę tego usuwać, chcę zmienić tekst

FranXh Kwietnia

Answer 4

Nie możesz usunąć tekstu i umieścić obok niego etykietę zastępczą?

Roger Lipscombe

Answer 5

W innym poście jest naprawdę schludna odpowiedź. stackoverflow.com/a/21842275/3653494

P-Bagels

Answer 6

jest to bardzo możliwe: sprawdź to szybkie rozwiązanie - zawiera inne rzeczy, po prostu przewiń do dołu CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7

darga33

Answer 7

17

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

Jeremy Thille
źródło

6

To nie jest etykieta na przycisku, ale „Nie wybrano pliku” obok. Kiedy wybieram plik, zmienia się z Nie wybrano pliku na nazwa_pliku. Coś. Więc uważam, że powinno być zmienne.

FranXh,

@JeremyThille, ponieważ ludzie to ludzie.

rano

Answer 8

6

To nie jest etykieta na przycisku, ale „Nie wybrano pliku” obok. Kiedy wybieram plik, zmienia się z Nie wybrano pliku na nazwa_pliku. Coś. Więc uważam, że powinno być zmienne.

FranXh,

Answer 9

@JeremyThille, ponieważ ludzie to ludzie.

rano

Answer 10

216

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.

SKManX
źródło

1

Działa to nawet w IE9, gdzie nie można ukryć file inputi kliknąć go w JavaScript. Dzięki!

huysentruitw

1

To jest świetne. Elegancja hackity. Kocham to.

Ben

3

Świetne rozwiązanie, to powinna być akceptowana odpowiedź.

Multitut

1

Świetne rozwiązanie, pozwala nawet w łatwy sposób dostosować pole

SAFAD

8

Ciekawe rozwiązanie html, ale złe pod względem użyteczności. Użytkownik zawsze zobaczy „Wybierz plik” lub odpowiednik, nawet po wybraniu pliku.

Cthulhu

Answer 11

1

Działa to nawet w IE9, gdzie nie można ukryć file inputi kliknąć go w JavaScript. Dzięki!

huysentruitw

Answer 12

1

To jest świetne. Elegancja hackity. Kocham to.

Ben

Answer 13

3

Świetne rozwiązanie, to powinna być akceptowana odpowiedź.

Multitut

Answer 14

1

Świetne rozwiązanie, pozwala nawet w łatwy sposób dostosować pole

SAFAD

Answer 15

8

Ciekawe rozwiązanie html, ale złe pod względem użyteczności. Użytkownik zawsze zobaczy „Wybierz plik” lub odpowiednik, nawet po wybraniu pliku.

Cthulhu

Answer 16

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

Answer 17

2

Możesz ulepszyć tę odpowiedź, wyjaśniając, jak to działa.

user8397947

Answer 18

Wygląda na to, że przeciąganie plików nie działa, gdy to robisz.

fonZ

Answer 19

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

Answer 20

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

Ukryj wprowadzone dane i dodaj przycisk „pliki”
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;'>

Rozwiń fragment

Gotowe, działa idealnie :)

Fred

Answer 21

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

Rozwiń fragment

Answer 22

Działa to bardzo skutecznie, ukryje tekst w pobliżu wejścia pliku.

always-a-learner

Answer 23

6

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

Szymon
źródło

Testowałem w Chrome i wszystkich przeglądarkach. Działa dobrze. Czy możesz to przetestować i zweryfikować.

simon

4

Przetestowano ponownie w Chrome, Safari, Firefox. To nie działa.

AdamInTheOculus

Sprawdzam w chrome Wersja 56.0.2924.87 działa idealnie dobrze. Której wersji używasz? @PantsMagee

simon

Po prostu dodaje podpowiedź z tekstem ustawionym w titleatrybucie, jak widzę

Fiodor

Answer 24

Testowałem w Chrome i wszystkich przeglądarkach. Działa dobrze. Czy możesz to przetestować i zweryfikować.

simon

Answer 25

4

Przetestowano ponownie w Chrome, Safari, Firefox. To nie działa.

AdamInTheOculus

Answer 26

Sprawdzam w chrome Wersja 56.0.2924.87 działa idealnie dobrze. Której wersji używasz? @PantsMagee

simon

Answer 27

Po prostu dodaje podpowiedź z tekstem ustawionym w titleatrybucie, jak widzę

Fiodor

Answer 28

3

Coś takiego mogłoby zadziałać

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

Kevin Lynch
źródło

Answer 29

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.

Answer 30

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

Rozwiń fragment

Answer 31

W jaki sposób mogę wyświetlić tekst „Wybierz logo firmy” pod przyciskiem, a nie po prawej stronie?

Alex

Answer 32

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>

Answer 33

2

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

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

nwillo
źródło

1

To proste i działa dobrze. Tylko szerokość to 100 pikseli; :)

Sachin Shah

Answer 34

1

To proste i działa dobrze. Tylko szerokość to 100 pikseli; :)

Sachin Shah

Answer 35

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>

i css

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

Ir Calif
źródło

1

wejście [typ = "plik"] {kolor: przezroczysty; kolor tła: # F89406; obramowanie: 2px solid # 34495e; szerokość: 100%; wysokość: 36px; border-radius: 3px; }

Ir Calif

Answer 36

1

wejście [typ = "plik"] {kolor: przezroczysty; kolor tła: # F89406; obramowanie: 2px solid # 34495e; szerokość: 100%; wysokość: 36px; border-radius: 3px; }

Ir Calif

Answer 37

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/

Answer 38

0

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>

źródło

przycisk zniknął.

Diansheng,

to działało dobrze dla mnie. Przycisk zniknął, ale kliknięcie etykiety otwiera okno dialogowe otwierania plików i możesz nadać mu styl, aby wyglądał jak przycisk. Pozbył się irytującego tekstu „No File Chosen”.

NoBullMan

Answer 39

przycisk zniknął.

Diansheng,

Answer 40

to działało dobrze dla mnie. Przycisk zniknął, ale kliknięcie etykiety otwiera okno dialogowe otwierania plików i możesz nadać mu styl, aby wyglądał jak przycisk. Pozbył się irytującego tekstu „No File Chosen”.

NoBullMan

Answer 41

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

Answer 42

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

Answer 43

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>

Answer 44

Więc to zostało odrzucone, dlaczego? Może dlatego, że w zupełnie niepowiązanym poście zasugerowałem, że łatwo jest odruchowo głosować przeciw, ale znacznie trudniej jest być konstuktywnym?

DLyons

Zmień opcję „Nie wybrano pliku”:

Odpowiedzi: