Ubah "Tidak ada file yang dipilih":

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?

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

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.

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

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

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

1. Sembunyikan masukan Anda dan tambahkan tombol 'file'
2. 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;'>

Selesai, bekerja dengan sempurna :)

Fred

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

Sesuatu seperti ini bisa berhasil

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

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

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>

Ubah saja lebar input. Sekitar 90px

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

dan css

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

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/

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>

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

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

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>