Question

我有 user.component.html 和 user.component.ts 我发现的所有示例都是以这种方式使用html <input type="file" /> 我不想使用这种风格。我有我的html文件：

<button type="button" class="btn" (click)="openPicture()" Browse </button>

以下是ts文件的功能：

  public openPicture() {
    //for testing
    console.log('button clicked to open picture');

    var picture = browse.the.picture.and.assing.to.this.variable;

    //another test, see on console if picture is read
    console.log('%c       ', 'font-size: 100px; background: {{picture}} no-repeat;');
    // Later display picture variable on html and save to database or do anything desired.
}

我在使用angular/material的stackoverflow上找到example，但我没有这个模块。有没有其他替代方法，没有安装任何额外的包来解决这个问题？

Answer 1

你可以像这样实施

<input type="file" style="display: none" #file (change)="fileChange($event)"/>
<button type="button" class="btn" (click)="file.click()"> Browse </button>

<强> .TS

export class AppComponent {
  file: File;

  constructor() {

  }

  fileChange(file) {
    this.file = file.target.files[0];
    console.log(this.file.name);
  }
}

Answer 2

您可以在标签中尝试旧的隐藏输入：

<label class="btn">
    Browse <input type="file" style="display: none;" (change)="handleChange($event)">
</label>

handleChange实现必须使用事件：

handleChange(event) {
    // consume event.target.files[0] which has File type
}

可以在MDN

找到File的其余内容

Answer 3

由于浏览器安全功能，您实际上需要使用Sub ChangeImage() With Application.FileDialog(msoFileDialogFilePicker) .AllowMultiSelect = False .ButtonName = "Submit" .Title = "Select an image file" .Filters.Clear .Filters.Add "All Pictures", "*.*" If .Show = -1 Then Dim img As Object Set img = ActiveSheet.Pictures.Insert(.SelectedItems(1)) img.LockAspectRatio = msoFalse img.Left = 141 img.Top = 925 img.Width = 600 img.Height = 251 Else Debug.Print "Prompt closed" End If End With End Sub标记来访问文件系统。但是，您可以执行的操作是隐藏input元素并从其余代码和标记中访问它。

查看this related answer，了解您可以做些什么。否则，这是一个如何工作的简单示例：

input

单击按钮浏览AngularJS + TypeScript中的文件

3 个答案: