如何将离子输入类型文件设置为按钮答案

【问题标题】：How to style Ionic input type file as a Button如何将离子输入类型文件设置为按钮
【发布时间】：2016-01-19 20:46:29
【问题描述】：

我想设计一个离子文件选择器按钮。

<input type="file" id="myFileInput">

但是 Ionic 没有输入类型的文件按钮。那么，我怎样才能获得比标准按钮更好看的按钮选择文件文本呢？

【问题讨论】：

您要上传什么类型的文件到您的应用程序中？是照片/视频、文本文件还是其他？

标签： javascript meteor input ionic-framework input-type-file

【解决方案1】：

如果您只想将<input> 元素设置为按钮，例如，您可以采用本文建议的样式之一：http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

或者来自 CSS-tricks 的另一个例子：https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

或者这个：http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

请记住，在移动设备中它可能无法工作，您可能需要一个 cordova 插件。例如：https://github.com/apache/cordova-plugin-file

【讨论】：

感谢我的工作。我将输入按钮设置为无，并设置了一个带有图标的按钮。谢谢！

【解决方案2】：

我发现最好的方法是使用带有 for 属性的标签并使用 css 对其进行自定义。请记住，for 标签必须是输入 id。因此，当用户点击标签时，会触发输入。

<label class="myFakeUploadButton" for="myFileInput">Upload</label>
<input type="file" id="myFileInput">

#myFileInput{
  position: absolute;
  opacity: 0;
}

.myFakeUploadButton{
 /* Whatever you want */
}

如果你愿意的话，你可以使用这样的图标：

<input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput"/>
<label for="fileInput" icon-only ion-button>
    <ion-icon name="camera"></ion-icon>
</label>

【讨论】：

【解决方案3】：

Zerzeri 的回答很好，但不完整这是我对上述内容的实现

         <ion-item>
            <ion-button expand="full" (click)="f.click()">
              <ion-icon lazy="true" slot="start" name="image"></ion-icon>
              <ion-label slot="end">Profile pic</ion-label>
            </ion-button>
              <input class="ion-hide" #f type="file" (change)="loadImageFromDevice($event)" id="file-input"
                accept="image/png, image/jpeg">

         </ion-item>

在您的 TS 中：

handleFileInput(event) {
    console.log(event);
    this.userDetails.profilePic = event.target.files[0];
  }

【讨论】：

【解决方案4】：

这种解决方案怎么样（对我有用）：

 <ion-button (click)="f.click">Upload</ion-button

.inputFile {
   width: 0;
   height: 0;
 }

& 为你的按钮设置你喜欢的样式，如果你点击ion-button，你实际上会点击input file

【讨论】：

绝招！多亏了这一点，我设法解决了您遇到的同样问题。这是该问题的最佳答案，因为通过这种方式，CSS 问题得到了解决，否则为标签设置在所有设备上看起来都不错的样式是一项更复杂的任务。太好了！
谢谢@LaBracca :)