如何使用按钮样式在Ionic 2+中创建自定义文件输入？

Question

这是我的模板:

<label>{{label}}</label>
<input type="file" (change)="fileUpload($event)" id="file-input" style="position:absolute; top: -999999px" #fileInp>
<button ion-button (click)="onClick()">Upload</button>

和ts文件:

@ViewChild('fileInp') fileInput: ElementRef;
@Input() label: string;
@Output() data = new EventEmitter<FormData>();

fileUpload(event) {
  let fd = new FormData();
  fd.append('file', event.srcElement.files[0]);
  this.data.emit(fd);
}

onClick() {
  this.fileInput.nativeElement.click();
}

在Android和浏览器中一切正常,但在iOS上则不行.如果我禁用模板中的按钮,相同的代码将起作用.

Answer 1

您无法在iOS上触发对文件输入的单击.解决方法是使用css将输入元素的不透明度设置为0,并将其放在按钮的顶部.这样,将不会看到文件输入,但单击按钮时将单击它.

<ion-item>
  <label>{{label}}</label>
  <input type="file" (change)="fileUpload($event)" id="file-input" style="opacity: 0" #fileInp>
  <button ion-button (click)="onClick()">Upload</button>
</ion-item>

然后在.scss文件中:

#file-input {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 999;
}

可能还有其他一些方法可以解决这个问题,但这就是我在过去使用的应用程序上管理的方式.

Answer 2

我通常会做以下事情。

    <ion-item>
        <ion-button color="primary" (click)="inputFile.click()">
             <ion-icon name="attach"></ion-icon> Anexar documentos
        </ion-button>
        <input #inputFile id="input-file"  style="opacity:0" type="file" (change)="uploadFiles($event)"
        multiple/>
    </ion-item>