web-dev-qa-db-ja.com

ボタンのスタイルを使用して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では機能しません。テンプレートのボタンを無効にしても同じコードが機能します。

angularcordovaionic2ionic3
6
Anurag Kumar

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

この問題を解決する方法は他にもいくつかあると思いますが、それが私が過去に取り組んだアプリで管理した方法です。

6
sebaferreras

私が見つけた最善の方法は、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 */
}
1
Pablo

私は通常次のことをします。

    <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>
1
Paulo Damasceno