Chrome'daki bir dosya girişinden "Dosya seçilmedi" ipucunu nasıl kaldırabilirim?

Google Chrome'daki bir dosya girişinden "Dosya seçilmedi" ipucunu kaldırmak istiyorum (Firefox'ta hiçbir araç ipucunun görüntülenmediğini görüyorum).

Lütfen giriş alanındaki metinden değil, fareyi girişin üzerine getirdiğinizde görünen araç ipucundan bahsettiğime dikkat edin.

Bunu şanssız denedim:

$('#myFileInput').attr('title', '');

Bu, webkit tarayıcılarının yerel bir parçasıdır ve kaldıramazsınız. Dosya girişlerini örtmek veya gizlemek gibi karmaşık bir çözüm düşünmelisiniz .

Bir Hacky çözeltisi:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

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

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

Vaktini boşa harcamak

Varsayılan araç ipucu, başlık özelliği kullanılarak düzenlenebilir

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

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

Benim için, metnin görünmez olmasını ve yine de yerel tarayıcı düğmesini kullanmasını istedim.

input[type='file'] {
  color: transparent;
}

Tanımlanmamış tüm önerileri beğeniyorum ama farklı bir kullanım durumum vardı, umarım bu aynı durumda birine yardımcı olur.

Çok kolay bir çözüm buldum, sadece başlık özelliğine boş bir dize ayarlayın.

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

Chrome gibi webkit tarayıcılarında boşluk ve Firefox veya IE'de boş bir dizeyle bir başlık ayarlayan araç ipucunu devre dışı bırakabilirsiniz (Chrome 35, FF 29, IE 11, safari mobile üzerinde test edilmiştir)

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

Çok kolay, CSS'nin girdi ["tip"] şeyini hedeflediğini unutun, benim için çalışmıyor. Neden bilmiyorum Çözümümü HTML etiketimde buldum

<input type="file" style="color:transparent; width:70px;"/>

Problemin sonu

Buradaki tüm cevaplar tamamen aşırı karmaşık veya başka türlü tamamen yanlış.

html:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css:

input {
    display: none;
}

javascript:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

Bu kemanı en basit şekilde yarattım. Dosya Seç düğmesine tıklamak, dosya seçme menüsünü getirecektir. Daha sonra düğmeyi istediğiniz gibi stilize edebilirsiniz. Temel olarak, tek yapmanız gereken dosya girişini gizlemek ve başka bir düğmeye tıkladığınızda üzerine sentetik bir tıklama tetiklemektir. Bunu IE 9, FF ve Chrome'da test ettim ve hepsi iyi çalışıyor.

Bu benim için çalışıyor (en azından Chrome ve Firefox'ta):

<input type="file" accept="image/*" title="&nbsp;"/>

Bu aldatıcı bir soru. 'Dosya seçilmedi' öğesini seçmenin bir yolunu bulamadım, bu yüzden: after sözde seçiciyi kullanarak bir maske oluşturdum.

Çözümüm ayrıca düğmeyi biçimlendirmek için aşağıdaki sözde seçicinin kullanılmasını gerektiriyor:

::-webkit-file-upload-button

Şunu deneyin: http://jsfiddle.net/J8Wfx/1/

Bilginize: Bu yalnızca webkit tarayıcılarında çalışacaktır.

Not: Yukarıdakine benzer webkit sözde seçicilerini webkit denetçisinde nasıl görüntüleyeceğini bilen varsa lütfen bana bildirin

Tüm tarayıcılarda ve basit. bu benim için yaptı

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

Bunu başarmak için kontrolü oldukça özelleştirmeniz gerekecek.

Lütfen şu adresteki kılavuzu izleyin: http://www.quirksmode.org/dom/inputfile.html

Sarın ve görünmez yapın. Chrome, Safari ve FF'de çalışın.

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

Gereksiz javascript kullanmaktan kaçınmak daha iyidir. Girişin tıklama hedefini aşağıdaki gibi genişletmek için etiket etiketinden yararlanabilirsiniz:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

Giriş gizli olsa bile, bağlantı yine de onun için bir tıklama hedefi olarak çalışır ve istediğiniz gibi biçimlendirebilirsiniz.

Opaklığı sıfıra ayarlasanız bile, araç ipucu görünecektir. visibility:hiddenElemanı dene . Benim için çalışıyor.

Benim için çalışıyor!

input[type="file"]{
  font-size: 0px;
}

Ardından, kendi girdi dosyanızı oluşturmak için width, heightveya diğer özellikler gibi farklı türden stilleri kullanabilirsiniz .

-webkit-appearance:Bir şans verin . Yine de denemeye değer.

http://css-infos.net/property/-webkit-appearance

Umarım yardımcı olur :)

Doğrudan girdi [tür = dosya] hakkında çok fazla değişiklik yapamazsınız .

Girdi türü dosya opaklığını 0 yapın ve özel CSS ile üzerine göreceli bir öğe [div / span / button] yerleştirmeye çalışın

Bunu deneyin http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Kimsenin bahsetmediğini görmek sürpriz event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });

öğe için yalnızca düğmeyi gösterecek ve "dosya seçilmedi" ifadesini gizleyecek bir genişlik ayarlayabilirsiniz.

Bunun için iyi bir cevap arıyorum ... ve şunu buldum:

Önce 'dosya seçilmedi' ifadesini silin

input[type="file"]{
font-size: 0px;
}

daha sonra düğmeyi -webkit-file-upload-buttonşu şekilde çalıştırın:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

umarım bu aradığın şeydir, benim için çalışıyor.

Yukarıdaki önerilerin bazılarını jQuery kullanarak birleştirerek işte yaptığım şey:

input[type='file'].unused {
  color: transparent;
}

Ve:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

Ve dosya girişlerinize "kullanılmayan" sınıfı koyun. Bu basit ve oldukça iyi çalışıyor.

Benim için en iyi çözüm, girdiyi [type = "file"] bir sarmalayıcıya sarmak ve biraz jquery kodu eklemektir:

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}

<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

"Dosya seçilmedi" yi ve bu metnin arkasına eklenen fazladan boşluğu tamamen ortadan kaldıran hacky bir çözüm buldum (Chrome'da "Dosya seçilmedi" gibi bir şey görüyorum).

Bu, sayfa hizalamamı tamamen bozuyordu, bu yüzden bir çözüm bulmak için onunla gerçekten savaştım. Giriş etiketinin stil özniteliğinin içinde, "genişlik" in düğmenin genişliğine ayarlanması, takip eden metni ve boşlukları ortadan kaldıracaktır. Düğmenin genişliği tüm tarayıcılarda aynı olmadığından (örneğin, Firefox'ta biraz daha küçüktür), stilin rengini sayfanın arka planıyla aynı renge ayarlamak isteyeceksiniz (aksi takdirde başıboş " Hayır "görünebilir). Girdi dosyası etiketim şuna benzer:

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">    

Biraz hile olduğunu biliyorum, ancak tek ihtiyacım olan rengi stil sayfasında şeffaf olarak ayarlamaktı - satır içi bu stil = "color: transparent;" gibi görünecektir.