Navigateur ouvert ouvrir le fichier de dialogue

Question

Je cherchais ce Saint-Graal - de belles boîtes de dialogue en HTML. Je suis venu avec une solution qui utilise jQuery à click() l'élément de fichier (caché) quand un bouton est cliqué. Cela fonctionne très bien dans FireFox 4, mais Chrome et Opera échouent. Changer le click() en focus() a fonctionné pour Chrome, mais rien ne fonctionne dans Opera. Je n'ai pas testé IE, mais je ne veux pas encore ragequit la vie.

Voici le code actuel:

HTML

<div class="formFile" id="profileImgContainer"> 
    <input type="file" name="profileImg" id="profileImg"> 

    <label>Profile Picture</label> 

    <div> 
     <input type="text" id="profileImgText"><input type="button" id="profileImgButton" value="Choose File"> 
    </div> 
</div> 

jQuery

$(".formFile input[type='file']").live('change', function() 
{ 
    $(this).parents(".formFile").find("input[type='text']").val($(this).val()); 
}); 

$(".formFile input[type='button']").live('click', function() 
{ 
    $(this).parents(".formFile").find("input[type='file']").click(); 
}); 

$(".formFile input[type='text']").live('click', function() 
{ 
    $(this).parents(".formFile").find("input[type='file']").click(); 
}); 

Quelqu'un peut-il offrir un moyen croix navigateur d'ouvrir la boîte de dialogue de fichier en utilisant jQuery/JavaScript ? Je ne veux pas utiliser l'astuce élément transparent en raison de la nécessité d'avoir des interactions d'entrée (CSS :hover), etc.

Answer 1

Essayez d'utiliser trigger():

$(this).parents(".formFile").find("input[type='file']").trigger('click'); 

Answer 2

Cela pourrait être quelques années de retard, mais est ici est une façon de le faire sans Javascript et c'est aussi un navigateur croisé.

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

Si vous rencontrez des problèmes, vous devrez peut-être utiliser l'attribut pour l'étiquette indiquant l'identifiant de l'entrée.