Question

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

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

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

Answer 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>

Answer 2

我找到了解决方案：

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

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

这是the JSFiddle

隐藏按钮Semantic-UI内的输入文件

2 个答案: