Ubah "Tidak ada file yang dipilih":

Question 1

Saya memiliki tombol "Pilih file" sebagai berikut (Saya menggunakan Jade tetapi harus sama dengan Html5):

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

Dalam browser ini menunjukkan tombol dengan teks di sebelahnya "Tidak ada file yang dipilih". Saya ingin mengubah teks "Tidak ada file yang dipilih" menjadi yang lain, seperti "Tidak ada video yang dipilih" atau "Tolong pilih video". Saya mengikuti saran pertama di sini:

Saya tidak ingin melihat 'tidak ada file yang dipilih' untuk kolom input file

Tetapi melakukan ini tidak mengubah teks:

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

Adakah yang bisa membantu saya mencari tahu di mana masalahnya?

Question 2

Saya cukup yakin Anda tidak dapat mengubah label default pada tombol, mereka di-hardcode di browser (setiap browser menampilkan tombol dengan caranya sendiri). Lihat artikel gaya tombol ini

Question 3

Sembunyikan input dengan css, tambahkan label dan tetapkan ke tombol input. label akan dapat diklik dan ketika diklik, itu akan menjalankan dialog file.

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

Kemudian beri gaya label sebagai tombol jika Anda mau.

Question 4

Coba ini hanya tipuan

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

Bagaimana itu bekerja

Sangat sederhana. elemen Label menggunakan tag "untuk" untuk merujuk ke elemen formulir berdasarkan id. Dalam kasus ini, kami menggunakan "img" sebagai kunci referensi di antara keduanya. Setelah selesai, setiap kali Anda mengklik label, secara otomatis memicu peristiwa klik elemen formulir yang merupakan peristiwa klik elemen file dalam kasus kami. Kami kemudian membuat elemen file tidak terlihat dengan menggunakan display: none dan bukan visibility: hidden sehingga tidak membuat ruang kosong.

Selamat menikmati coding

Question 5

http://jsfiddle.net/ZDgRG/

Lihat link di atas. Saya menggunakan css untuk menyembunyikan teks default dan menggunakan label untuk menunjukkan apa yang saya inginkan:

<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

Benar, tidak ada cara untuk menghapus 'tidak ada file yang dipilih' ini, meskipun Anda memiliki daftar file pra-unggah.

Solusi paling sederhana yang saya temukan (dan berfungsi di IE, FF, CR) adalah sebagai berikut

Sembunyikan masukan Anda dan tambahkan tombol 'file'
kemudian panggil tombol 'file' dan minta dia untuk mengikat fileupload (saya menggunakan JQuery dalam contoh ini)

$('.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;'>

Luaskan cuplikan

Selesai, bekerja dengan sempurna :)

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

Luaskan cuplikan

Question 8

Tetapi jika Anda mencoba untuk menghapus tooltip ini

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

Ini tidak akan berhasil. Ini adalah trik kecil saya untuk mengerjakan ini, coba judul dengan spasi. Ini akan berhasil. :)

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

Question 9

Sesuatu seperti ini bisa berhasil

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

Catatan: Btn btn-primary adalah kelas tombol bootstrap. Namun tombol tersebut mungkin terlihat kusut pada posisinya. Semoga Anda bisa memperbaikinya dengan inline 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>

Luaskan cuplikan

Question 12

menggunakan label dengan teks label diubah

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

tambahkan jquery

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

Question 13

Ubah saja lebar input. Sekitar 90px

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

dan css

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

Question 15

Anda bisa mencobanya dengan cara ini:

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

Untuk menampilkan file yang dipilih:

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

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

Terima kasih kepada @ unlucky13 untuk mendapatkan nama file yang dipilih

Ini biola yang berfungsi:

http://jsfiddle.net/eamrmoc7/

Question 16

Ini akan membantu Anda mengubah nama untuk "tidak ada file yang memilih untuk memilih gambar profil"

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

Question 17

Saya akan menggunakan "tombol" daripada "label", semoga ini membantu seseorang.

Ini hanya akan menampilkan sebuah tombol, pengguna mengklik akan popup file chooser, setelah file dipilih, secara otomatis diunggah.

<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

Anda dapat menggunakan kode css berikut untuk menyembunyikan (tidak ada file yang dipilih)

HTML

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

CSS

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

PASTIKAN WARNA SESUAI DENGAN WARNA LATAR BELAKANG

Question 19

Ada contoh bagus (yang menyertakan validasi jenis file) di:

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

Ini pada dasarnya adalah ide Amos versi menyempurnakan menggunakan tombol.

Saya mencoba beberapa saran di atas tetapi tidak berhasil (tapi mungkin itu saya).

Saya bertujuan ulang untuk melakukan konversi file Excel menggunakan

  <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

Saya memiliki tombol "Pilih file" sebagai berikut (Saya menggunakan Jade tetapi harus sama dengan Html5):

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

Dalam browser ini menunjukkan tombol dengan teks di sebelahnya "Tidak ada file yang dipilih". Saya ingin mengubah teks "Tidak ada file yang dipilih" menjadi yang lain, seperti "Tidak ada video yang dipilih" atau "Tolong pilih video". Saya mengikuti saran pertama di sini:

Saya tidak ingin melihat 'tidak ada file yang dipilih' untuk kolom input file

Tetapi melakukan ini tidak mengubah teks:

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

Adakah yang bisa membantu saya mencari tahu di mana masalahnya?

html button file-upload pug FranXh
sumber

temukan jawabannya di sini stackoverflow.com/questions/12035400/…

Mahmoud Farahat

1

@MahmoudFarahat Saya tidak ingin menghapusnya, saya ingin mengubah teks

FranXh

Tidak bisakah Anda menghapus teks, dan meletakkan label tempat penampung di sebelahnya?

Roger Lipscombe

Ada jawaban yang sangat rapi untuk ini di pos lain. stackoverflow.com/a/21842275/3653494

P-Bagel

sangat mungkin: lihat solusi cepat ini - termasuk hal-hal lain, cukup gulir ke bawah CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7

darga33

Answer 2

temukan jawabannya di sini stackoverflow.com/questions/12035400/…

Mahmoud Farahat

Answer 3

1

@MahmoudFarahat Saya tidak ingin menghapusnya, saya ingin mengubah teks

FranXh

Answer 4

Tidak bisakah Anda menghapus teks, dan meletakkan label tempat penampung di sebelahnya?

Roger Lipscombe

Answer 5

Ada jawaban yang sangat rapi untuk ini di pos lain. stackoverflow.com/a/21842275/3653494

P-Bagel

Answer 6

sangat mungkin: lihat solusi cepat ini - termasuk hal-hal lain, cukup gulir ke bawah CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7

darga33

Answer 7

17

Saya cukup yakin Anda tidak dapat mengubah label default pada tombol, mereka di-hardcode di browser (setiap browser menampilkan tombol dengan caranya sendiri). Lihat artikel gaya tombol ini

Jeremy Thille
sumber

6

Ini bukan label pada tombol, melainkan "Tidak ada file yang dipilih" di sebelahnya. Saat saya memilih file, itu berubah dari Tidak ada file yang dipilih menjadi nama file.something. Jadi saya percaya itu harus bisa diubah.

FranXh

@JeremyThille karena orang adalah manusia.

amn

Answer 8

6

Ini bukan label pada tombol, melainkan "Tidak ada file yang dipilih" di sebelahnya. Saat saya memilih file, itu berubah dari Tidak ada file yang dipilih menjadi nama file.something. Jadi saya percaya itu harus bisa diubah.

FranXh

Answer 9

@JeremyThille karena orang adalah manusia.

amn

Answer 10

216

Sembunyikan input dengan css, tambahkan label dan tetapkan ke tombol input. label akan dapat diklik dan ketika diklik, itu akan menjalankan dialog file.

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

Kemudian beri gaya label sebagai tombol jika Anda mau.

SKManX
sumber

1

Ini bahkan berfungsi di IE9, di mana Anda tidak dapat menyembunyikan file inputdan mengkliknya dari JavaScript. Terima kasih!

huysentruitw

1

Ini bagus. Keanggunan hackity. Suka.

Ben

3

Solusi hebat, ini harus menjadi jawaban yang diterima.

Multitut

1

Solusi hebat, bahkan memungkinkan cara mudah untuk menyesuaikan bidang

SAFAD

8

Solusi html yang menarik, tetapi buruk untuk kegunaan. Pengguna akan selalu melihat "Pilih file" atau yang setara, bahkan setelah memilih file.

Cthulhu

Answer 11

1

Ini bahkan berfungsi di IE9, di mana Anda tidak dapat menyembunyikan file inputdan mengkliknya dari JavaScript. Terima kasih!

huysentruitw

Answer 12

1

Ini bagus. Keanggunan hackity. Suka.

Ben

Answer 13

3

Solusi hebat, ini harus menjadi jawaban yang diterima.

Multitut

Answer 14

1

Solusi hebat, bahkan memungkinkan cara mudah untuk menyesuaikan bidang

SAFAD

Answer 15

8

Solusi html yang menarik, tetapi buruk untuk kegunaan. Pengguna akan selalu melihat "Pilih file" atau yang setara, bahkan setelah memilih file.

Cthulhu

Answer 16

Coba ini hanya tipuan

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

Bagaimana itu bekerja

Sangat sederhana. elemen Label menggunakan tag "untuk" untuk merujuk ke elemen formulir berdasarkan id. Dalam kasus ini, kami menggunakan "img" sebagai kunci referensi di antara keduanya. Setelah selesai, setiap kali Anda mengklik label, secara otomatis memicu peristiwa klik elemen formulir yang merupakan peristiwa klik elemen file dalam kasus kami. Kami kemudian membuat elemen file tidak terlihat dengan menggunakan display: none dan bukan visibility: hidden sehingga tidak membuat ruang kosong.

Selamat menikmati coding

Answer 17

2

Anda dapat membuat jawaban ini lebih baik dengan menjelaskan bagaimana cara kerjanya.

user8397947

Answer 18

Tampaknya menyeret file tidak berfungsi saat Anda melakukan ini.

fonZ

Answer 19

http://jsfiddle.net/ZDgRG/

Lihat link di atas. Saya menggunakan css untuk menyembunyikan teks default dan menggunakan label untuk menunjukkan apa yang saya inginkan:

<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

Benar, tidak ada cara untuk menghapus 'tidak ada file yang dipilih' ini, meskipun Anda memiliki daftar file pra-unggah.

Solusi paling sederhana yang saya temukan (dan berfungsi di IE, FF, CR) adalah sebagai berikut

Sembunyikan masukan Anda dan tambahkan tombol 'file'
kemudian panggil tombol 'file' dan minta dia untuk mengikat fileupload (saya menggunakan JQuery dalam contoh ini)

$('.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;'>

Luaskan cuplikan

Selesai, bekerja dengan sempurna :)

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

Luaskan cuplikan

Answer 22

Ini bekerja sangat efektif, ini akan menyembunyikan teks di dekat input file.

selalu-a-pembelajar

Answer 23

6

Tetapi jika Anda mencoba untuk menghapus tooltip ini

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

Ini tidak akan berhasil. Ini adalah trik kecil saya untuk mengerjakan ini, coba judul dengan spasi. Ini akan berhasil. :)

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

simon
sumber

Saya menguji di chrome dan semua browser. Ini bekerja dengan baik. Bisakah Anda mengujinya dan memverifikasi.

simon

4

Diuji lagi di Chrome, Safari, Firefox. Tidak bekerja.

AdamInTheOculus

Saya memeriksa di chrome Versi 56.0.2924.87 itu berfungsi dengan baik. Versi mana yang Anda gunakan? @PantsMagee

simon

Itu hanya menambahkan tooltip dengan teks yang Anda setel pada titleatribut, seperti yang saya lihat

Fyodor

Answer 24

Saya menguji di chrome dan semua browser. Ini bekerja dengan baik. Bisakah Anda mengujinya dan memverifikasi.

simon

Answer 25

4

Diuji lagi di Chrome, Safari, Firefox. Tidak bekerja.

AdamInTheOculus

Answer 26

Saya memeriksa di chrome Versi 56.0.2924.87 itu berfungsi dengan baik. Versi mana yang Anda gunakan? @PantsMagee

simon

Answer 27

Itu hanya menambahkan tooltip dengan teks yang Anda setel pada titleatribut, seperti yang saya lihat

Fyodor

Answer 28

3

Sesuatu seperti ini bisa berhasil

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

Kevin Lynch
sumber

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

Catatan: Btn btn-primary adalah kelas tombol bootstrap. Namun tombol tersebut mungkin terlihat kusut pada posisinya. Semoga Anda bisa memperbaikinya dengan inline 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>

Luaskan cuplikan

Answer 31

Bagaimana caranya agar teks "Pilih Logo Perusahaan" ditampilkan di bawah tombol dan bukan di sisi kanan ??

alex

Answer 32

menggunakan label dengan teks label diubah

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

tambahkan jquery

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

Answer 33

2

Ubah saja lebar input. Sekitar 90px

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

nwillo
sumber

1

Sederhana dan berfungsi dengan baik. Lebar hanya 100px; :)

Sachin Shah

Answer 34

1

Sederhana dan berfungsi dengan baik. Lebar hanya 100px; :)

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>

dan css

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

Ir Calif
sumber

1

masukan [type = "file"] {color: transparent; warna-latar belakang: # F89406; batas: 2px solid # 34495e; lebar: 100%; tinggi: 36px; radius batas: 3px; }

Ir Calif

Answer 36

1

masukan [type = "file"] {color: transparent; warna-latar belakang: # F89406; batas: 2px solid # 34495e; lebar: 100%; tinggi: 36px; radius batas: 3px; }

Ir Calif

Answer 37

Anda bisa mencobanya dengan cara ini:

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

Untuk menampilkan file yang dipilih:

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

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

Terima kasih kepada @ unlucky13 untuk mendapatkan nama file yang dipilih

Ini biola yang berfungsi:

http://jsfiddle.net/eamrmoc7/

Answer 38

0

Ini akan membantu Anda mengubah nama untuk "tidak ada file yang memilih untuk memilih gambar profil"

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

sumber

tombolnya hilang.

Diansheng

ini bekerja dengan baik untuk saya. Tombol hilang tetapi mengklik label membuka file membuka dialog dan Anda dapat memberi gaya pada label agar terlihat seperti tombol. Ini menyingkirkan teks "No File Chosen" yang mengganggu.

NoBullMan

Answer 39

tombolnya hilang.

Diansheng

Answer 40

ini bekerja dengan baik untuk saya. Tombol hilang tetapi mengklik label membuka file membuka dialog dan Anda dapat memberi gaya pada label agar terlihat seperti tombol. Ini menyingkirkan teks "No File Chosen" yang mengganggu.

NoBullMan

Answer 41

Saya akan menggunakan "tombol" daripada "label", semoga ini membantu seseorang.

Ini hanya akan menampilkan sebuah tombol, pengguna mengklik akan popup file chooser, setelah file dipilih, secara otomatis diunggah.

<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

Anda dapat menggunakan kode css berikut untuk menyembunyikan (tidak ada file yang dipilih)

HTML

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

CSS

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

PASTIKAN WARNA SESUAI DENGAN WARNA LATAR BELAKANG

Answer 43

Ada contoh bagus (yang menyertakan validasi jenis file) di:

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

Ini pada dasarnya adalah ide Amos versi menyempurnakan menggunakan tombol.

Saya mencoba beberapa saran di atas tetapi tidak berhasil (tapi mungkin itu saya).

Saya bertujuan ulang untuk melakukan konversi file Excel menggunakan

  <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

Jadi mengapa ini diremehkan? Mungkin karena dalam posting yang sama sekali tidak terkait, saya menyarankan bahwa mudah untuk melakukan downvote spontan tetapi jauh lebih mudah untuk menjadi konstruktif?

DLyons

Ubah "Tidak ada file yang dipilih":

Jawaban: