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

这是我的模板：

<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上则不行.
如果我禁用模板中的按钮,相同的代码将起作用.

您无法在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;
}

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