在按钮 Semantic-UI 中隐藏输入文件答案

【问题标题】：Hiding an input file inside a button Semantic-UI在按钮 Semantic-UI 中隐藏输入文件
【发布时间】：2015-06-12 07:38:17
【问题描述】：

有没有办法使用 Semantic-ui 完成这项工作？

我有这个按钮，看起来不错，但输入文件永远不会被调用。

<div class="ui icon big button">
        <i class="cloud icon"></i>
        <input type="file" id="hidde-new-file" style="display: none">
 </div>

【问题讨论】：

既然file 输入是只读的，为什么要隐藏它？您是否只想在光标位于元素上方时显示它？你能做一个 JSFiddle 吗？

标签： html css input semantic-ui

【解决方案1】：

我建议添加一个指向隐藏输入的标签。标签在单击时触发其输入。全原生无JS。

<div>
  <label for="hidden-new-file" class="ui icon button">
    <i class="cloud icon"></i>
    Open File
  </label>
  <input type="file" id="hidden-new-file" style="display: none">
</div>

【讨论】：

我在标签的“for”上有错字。谢谢提兹！

【解决方案2】：

我找到了解决办法：

将file 输入放在div 之外，在 div 中添加一个 ID，然后添加这个 JavaScript：

$("#divUpload").on("click", function() {
   $('#hidde-new-file').click(); 
});

这里是the JSFiddle

【讨论】：