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

我发现这样做的最好方法是使用带有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 */
}

Answer 3

我通常会执行以下操作。

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

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

3 个答案: