想要一个按钮，但必须使用输入Type = File？

Question

我有一个 Import 按钮，我希望看起来像这样：

HTML的内容如下：

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

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

以下是HTML：

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

我不需要输入框，我也不需要按钮来说明浏览。我想要第二个选项的功能，具有第一个选项的外观。这可能吗？

Answer 1

隐藏输入并使用“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>

Answer 2

是的，但您需要使用javascript。使文件输入隐藏，然后单击按钮激活它

 <input id="files" type="file" style="display:none"/>
 <button id="upload" type="button"> </button>
 <script>
    $('#upload').click(function() {
      $('#files').click();
    });
 </script>

Answer 3

您必须使用CSS使输入框透明，并在其上添加类似按钮的设计，如下所示：

HTML：

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

CSS：

.fileInput {
    margin: 20px;
    width: 80px;
    height: 20px;
    background-color: #FFF;
    border: #CCC 2px solid;
    overflow: hidden;
    text-align:center;
}

.fileInput input {
    display: block !important;
    width: 80px !important;
    height: 20px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

链接到jsFiddle：https://jsfiddle.net/AndrewL32/h40juz64/

注意：如果您想要＆＃34; INPUT＆＃34;在按钮上的文本，您可以将其添加到单独的div上，然后使用css positioning将其移动到输入框（这可能会有点棘手）或者您可以使用＆＃34; INPUT＆＃34;上面的文字，然后将其用作按钮的background-image。