javascript - 想要一个按钮,但必须在类型=文件的地方使用输入?

标签 javascript html css

我有一个 Import 按钮,我希望它看起来像这样:

enter image description here

它的 HTML 看起来像这样:

<button on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();">Import</button>

但是,因为我想要按钮打开文件,我的研究表明我需要使用输入控件,它看起来像这样:

enter image description here

这是它的 HTML:

<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"></input>

我不需要输入框,也不需要浏览按钮。我想要第二个选项的功能,以及第一个选项的外观。这可能吗?

最佳答案

隐藏输入并使用其“for”属性与输入的 ID 相匹配的标签。然后根据需要简单地设置标签样式。

<input type="file" id="abc" hidden>
<label for="abc">Import</label>

编辑

为了完整起见,这里是使用的实际代码。因为按钮包裹在标签中,所以不需要额外的样式。

<input id="hiddenImport" style="display:none" type="file" on-read-file="importTasks(contents)" ng-click="importTasks();"/>
<label for="hiddenImport"><button class="btn btn-default" ng-disabled="loading">Import</button></label>

关于javascript - 想要一个按钮,但必须在类型=文件的地方使用输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37578839/

相关文章:

带有 toString 的 Javascript 嵌套函数

html - CSS:float:left 和 float:right 的区别

javascript - 内容更改时重新居中 div

javascript - Coffeescript:Splat Sum 函数

javascript - 使用 Knockout.js 和 Ajax 上传附件

javascript - 为什么我的饼图没有更新为新大小?

jquery - 使用 DIV 的内容作为 HTML 页面的标题?

html - 在 HTML 中嵌入 XML(兼容 Firefox)

javascript - 径向进度条

html - 如何: overflow text above border-top like with border-bottom when height: 0px