从< input type =“文件">上传文件 [英] File upload from <input type="file">

问题描述

使用Angle 2 Beta，我似乎无法使用<input type="file">.

Using angular 2 beta, I cannot seem to get an <input type="file"> to work.

使用诊断程序，我可以看到其他type的双向绑定，例如text.

Using diagnostic, I can see two-way binding for other types such as text.

<form>
    {{diagnostic}}
    <div class="form-group">
        <label for="fileupload">Upload</label>
        <input type="file" class="form-control" [(ngModel)]="model.fileupload">
    </div>
</form>

在我的TypeScript文件中，有以下诊断行:

In my TypeScript file, I have the following diagnostic line:

get diagnostic() { return JSON.stringify(this.model); }

可能是不是JSON的问题吗?值是null.

Could it be that it is the issue of not being JSON? The value is null.

我无法真正验证input的值. У尽管选择文件..."旁边的文本更新了，但由于某种原因我看不到DOM中的差异.

I cannot really verify the value of the input. Уven though the text next to "Choose file ..." updates, I cannot see differences in the DOM for some reason.

推荐答案

我认为它不受支持.如果您查看此DefaultValueAccessor指令(请参见

I think that it's not supported. If you have a look at this DefaultValueAccessor directive (see https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23). You will see that the value used to update the bound element is $event.target.value.

这不适用于类型为file的输入，因为可以改为访问$event.srcElement.files文件对象.

This doesn't apply in the case of inputs with type file since the file object can be reached $event.srcElement.files instead.

有关更多详细信息，您可以看一下这个plunkr: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg? p = info :

For more details, you can have a look at this plunkr: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" (change)="onChange($event)"/>
    </div>
  `,
  providers: [ UploadService ]
})
export class AppComponent {
  onChange(event) {
    var files = event.srcElement.files;
    console.log(files);
  }
}

这篇关于从< input type =“文件">上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！