クロスブラウザの開いているファイルのブラウズダイアログ

Question

私はその聖杯を探していました。私は、ボタンがクリックされたときに（隠された）ファイル要素であるclick()にjQueryを使用するソリューションを考え出しました。これはFireFox 4では正常に動作しますが、ChromeとOperaは失敗します。 click()からfocus()をChrome用に変更しましたが、Operaでは何も動作しません。私はIEをテストしていませんが、私はまだ人生を激怒させたくありません。

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

誰でもjQueryの/ JavaScriptを使用してファイルダイアログを開くのクロスブラウザの方法を提供することができます：ここで

は、現在のコードです？ I入力の相互作用（CSS :hover）を持つ必要性に起因する透過要素のトリックを使用しないなど

Answer 1

trigger()を使用してみてください：

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

Answer 2

これは遅く、いくつかの年かもしれませんが、ここにありですJavascriptを使わずにこれを行う方法で、クロスブラウザーでもあります。あなたが問題を見つけた場合

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

は、入力のIDを指しているラベルに属性に使用する必要があるかもしれません。