Tetikleme ile giriş yap gizli giriş dosyası etiketinde jquery

Question

Görünmez bir <input type="file" /> üzerine bir div kullanmanın bu fikrini test ediyorum, böylece bir fantezi dosya yükleme düğmesi yapabilirim. Bazı kodlar gördüm ama biraz karmaşıktı. Kod Chrome'da Tamam çalışır rağmen

$(document).ready(function() { 
    $('#container').click(function() { 
     $('#file')[0].click(); 
    }) 
}); 

:

<div id="container">&nbsp;Click Me!&nbsp; 
    <input type="file" id="file" /> 
</div> 

JavaScript: Ben onun div konteyner

Html giriş etiketinin tıklama tetiklemek için jQuery kullanarak bu fikri çalışmakla düşünce ve IE, Safari'de çalışmıyor ve Firefox ile komik bir sorunu var: tıklamayı iki kez tetikler! Bunun neden böyle olduğu hakkında bir fikrin var mı? jQuery çapraz platform olmalı ve şaşkınım. İşte herhangi bir yardım için şimdiden fiddle

http://jsfiddle.net/kostasd/C4sCs/1/

Teşekkür olduğunu! Denedim

Kostas

Answer 1

farklı Olası Çözümler visiblity kullanma

• şunlardır: hidden; en: 1 piksel; Dosya giriş elemanı için.

tüm

#container { 
border:1px solid #b0b0b0; 
display: inline-block; 
position:relative; 
overflow:hidden; 
cursor:pointer; 
} 
#file { 
position:absolute; 
top:0; 
opacity:0; 
display:block; 
} 

de jquery kullanarak değil dosya giriş tıklama aramak için sadece kullanma Css http://jsfiddle.net/C4sCs/36/

• takip edip olarak bunun için jsfiddle olduğunu

pozisyonlar; blok: mutlak; top: 0; sol:

http://jsfiddle.net/C4sCs/42/