从<输入类型=“文件">上传文件 [英] File upload from <input type="file">
问题描述
使用 angular 2 beta,我似乎无法让 <input type="file">
工作.
使用诊断,我可以看到其他type
的双向绑定,例如text
.
</表单>
在我的 TypeScript 文件中,我有以下诊断行:
get diagnostic() { return JSON.stringify(this.model);}
会不会是不是JSON的问题?值为 null
.
我无法真正验证 input
的值.У尽管选择文件..."旁边的文本更新了,但由于某种原因,我看不到 DOM 中的差异.
我认为它不受支持.如果您查看此 DefaultValueAccessor
指令(请参阅 https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23).您将看到用于更新绑定元素的值是 $event.target.value
.
这不适用于类型为 file
的输入的情况,因为可以使用 $event.srcElement.files
代替文件对象.
有关更多详细信息,您可以查看此 plunkr:https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=信息:
@Component({选择器:'我的应用',模板:`<div><input type="file" (change)="onChange($event)"/>
`,提供者:[上传服务]})导出类 AppComponent {onChange(事件){var 文件 = event.srcElement.files;控制台日志(文件);}}
Using angular 2 beta, I cannot seem to get an <input type="file">
to work.
Using diagnostic, I can see two-way binding for other type
s 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>
In my TypeScript file, I have the following diagnostic line:
get diagnostic() { return JSON.stringify(this.model); }
Could it be that it is the issue of not being JSON? The value is null
.
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.
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
.
This doesn't apply in the case of inputs with type file
since the file object can be reached $event.srcElement.files
instead.
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);
}
}
这篇关于从<输入类型=“文件">上传文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!