Question

我想设置离子文件选择器按钮的样式。

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

但Ionic没有输入类型文件按钮。那么如何通过选择文件文本获得比标准按钮更好看的按钮？

Answer 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

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

Answer 3

我发现这样做的最好方法是使用带有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>

Answer 4

这种解决方案（对我有用）是什么

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

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

＆根据需要设置按钮的样式，如果您单击ion-button，则实际上将单击input file

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

4 个答案: