angular – 如何使用按钮样式在Ionic 2中创建自定义文件输入?
发布时间:2020-12-17 10:19:31 所属栏目:安全 来源:网络整理
导读:这是我的模板: label{{label}}/labelinput type="file" (change)="fileUpload($event)" id="file-input" style="position:absolute; top: -999999px" #fileInpbutton ion-button (click)="onClick()"Upload/button 和ts文件: @ViewChild('fileInp') fileIn
这是我的模板:
<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; } 可能还有其他一些方法可以解决这个问题,但这就是我在过去使用的应用程序上管理的方式. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |