这是我的模板：
<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;
}
