谷歌加觸發按鈕文件輸入

Question

是否有任何知道谷歌加觸發按鈕，然後打開文件輸入字段？

他們可以使用傳統瀏覽器的iframe，還是HTML 5的東西？

任何幫助將不勝感激，因爲我需要使Firefox 3.6通過按鈕觸發輸入文件。我已經讀過不可能的，但一些谷歌加可以做到這一點。

Answer 1

我只能用當前的firefox和chrom版本進行測試。如果它在IE中運行，至少需要IE 9（我無法在IE9中測試）。

HTML：

<div class="button_wrapper"> 
    <div class="button_visible" role="button">button description</div> 
    <div class="button_invisible"> 
     <input type="file" class="button_input" tabindex="-1" multiple="" /> 
    </div> 
</div> 

CSS：

.button_wrapper { 
    display: inline-block; 
    position: relative; 
} 
.button_visible { 
    display: inline-block; 
    position: relative; 
    padding: 6px 6px; 
    background-color: #EEE; 
    border: 1px solid #CCC; 
    color: #666; 
    font-size: 12px; 
    font-weight: bold; 
} 
.button_invisible { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
} 
.button_input { 
    position: absolute; 
    top: -10px; 
    left: -445px; 
    opacity: 0; 
    font: 40px arial,sans-serif; 
    cursor: pointer; 
} 

因爲我不想設定的寬度和高度在所有的CSS類，我添加了這個JS：

$('.button_invisible').each(function() { 
    $(this).width($(this).parent().width()); 
    $(this).height($(this).parent().height()); 
}); 

另請參閱我的jsfiddle。