如何将 Ionic 输入类型文件设置为 Button

Question

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

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

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

原文由 Erdem Güngör 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

例如，如果您只想将 <input> 元素设置为按钮样式，您可以采用本文建议的样式之一：http: //geniuscarrier.com/how-to-style-a-html -文件上传按钮-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

原文由 beaver 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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];
  }

原文由 Black Mamba 发布，翻译遵循 CC BY-SA 4.0 许可协议