"Dosya seçilmedi" seçeneğini değiştirin:

Aşağıdaki gibi "Dosya seç" düğmem var (Jade kullanıyorum, ancak Html5 ile aynı olmalı):

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

Tarayıcıda bu, yanında "Dosya seçilmedi" metninin bulunduğu bir düğme gösterir. "Dosya seçilmedi" metnini, "Video seçilmedi" veya "Lütfen bir video seçin" gibi başka bir şeyle değiştirmek istiyorum. Buradaki ilk önerileri takip ettim:

Bir dosya giriş alanı için 'dosya seçilmedi' görmek istemiyorum

Ancak bunu yapmak metni değiştirmedi:

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

Sorunun nerede olduğunu anlamama yardım eden var mı?

Düğmelerdeki varsayılan etiketleri değiştiremeyeceğinizden oldukça eminim, bunlar tarayıcılarda sabit kodlanmıştır (her tarayıcı düğme başlıklarını kendi yöntemiyle oluşturur). Bu düğme stili makalesine göz atın

Girişi css ile gizleyin, bir etiket ekleyin ve bunu giriş düğmesine atayın. etiket tıklanabilir olacak ve tıklandığında dosya diyaloğunu başlatacaktır.

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

Ardından, isterseniz etiketi bir düğme olarak biçimlendirin.

Bunu dene, bu sadece bir numara

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

Nasıl çalışır

Çok basit. Etiket öğesi, id ile bir formun öğesine başvurmak için "for" etiketini kullanır. Bu durumda, aralarında referans anahtarı olarak "img" kullandık. Bir kez yapıldığında, etikete her tıkladığınızda, bizim durumumuzda dosya öğesi tıklama olayı olan formun öğe tıklama olayını otomatik olarak tetikler. Daha sonra, boş alan oluşturmaması için display: none ve not visibility: hidden kullanarak dosya öğesini görünmez yaparız.

Kodlamanın tadını çıkarın

http://jsfiddle.net/ZDgRG/

Yukarıdaki bağlantıya bakın. Varsayılan metni gizlemek için css kullanıyorum ve ne istediğimi göstermek için bir etiket kullanıyorum:

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

Doğru, önceden yüklenmiş dosyaların bir listesine sahip olsanız bile, bu 'seçili dosya yok'u kaldırmanın bir yolu yoktur.

Bulduğum en basit çözüm (ve IE, FF, CR üzerinde çalışıyor) şudur

1. Girişinizi gizleyin ve bir 'dosyalar' düğmesi ekleyin
2. daha sonra 'dosyalar' düğmesini çağırın ve ondan dosya yüklemesini bağlamasını isteyin (bu örnekte JQuery kullanıyorum)

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

Tamamlandı, mükemmel çalışıyor :)

Fred

Ancak bu ipucunu kaldırmaya çalışırsanız

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

Bu işe yaramayacak. İşte bununla çalışmak için küçük numaram, bir boşluk ile başlığı deneyin. Çalışacak.:)

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

Bunun gibi bir şey işe yarayabilir

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

Not: Btn btn-primary, bir bootstrap düğmesi sınıfıdır. Ancak düğme yerinde garip görünebilir. Inline css ile düzeltebileceğinizi umuyoruz.

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

etiket metni değiştirilmiş etiketi kullanma

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

jquery ekle

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

Sadece girişin genişliğini değiştirin. Yaklaşık 90 piksel

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

ve css

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

Bunu şu şekilde deneyebilirsiniz:

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

Seçili dosyayı göstermek için:

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

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

@ Unlucky13'e seçilen dosya adını aldığınız için teşekkürler

İşte keman çalışması:

http://jsfiddle.net/eamrmoc7/

Bu, "dosya yok profil resmini seç" adını değiştirmenize yardımcı olacaktır

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

"Etiket" yerine "düğme" kullanırdım, umarım bu birine yardımcı olur.

Bu sadece bir düğme görüntüler, kullanıcı tıkladığında dosya seçiciyi açılır, dosya seçtikten sonra otomatik olarak yükler.

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

gizlemek için aşağıdaki css kodunu kullanabilirsiniz (dosya seçilmedi)

HTML

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

CSS

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

RENKİN ARKA PLAN RENGİYLE UYUŞTUĞUNDAN EMİN OLUN

Şu adreste (dosya türü doğrulamasını içeren) iyi bir örnek var:

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

Temelde, Amos'un bir düğme kullanma fikri, etli bir sürümü.

Başarısız olan yukarıdaki önerilerin birkaçını denedim (ama belki de bu benim).

Bunu kullanarak bir Excel dosyası dönüştürme yapmak için yeniden tasarlıyorum

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