File upload 从<；输入类型="；文件"&燃气轮机；_File Upload_Input_Angular

File upload 从<；输入类型="；文件"&燃气轮机；

file-upload input angular

File upload 从<；输入类型="；文件"&燃气轮机；,file-upload,input,angular,File Upload,Input,Angular,使用angular 2 beta，我似乎无法让正常工作使用diagnostic，我可以看到其他类型的双向绑定，例如文本 <form> {{diagnostic}} <div class="form-group"> <label for="fileupload">Upload</label> <input type="file" class="form-control" [(ngModel)]=

使用angular 2 beta，我似乎无法让

正常工作

使用diagnostic，我可以看到其他

类型

的双向绑定，例如

文本

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

这可能是不是因为不是JSON的问题？该值为

null

我无法真正验证

输入的值。即使“选择文件…”旁边的文本更新了，但由于某些原因，我看不到DOM中的差异。
我认为它不受支持。如果您查看此DefaultValueAccessor
指令（请参阅）。您将看到用于更新绑定元素的值是$event.target.value

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

有关更多详细信息，您可以查看此plunkr:：
@组件({
选择器：“我的应用程序”，
模板：`
`,
提供者：[上传服务]
})
导出类AppComponent{
onChange（事件）{
var files=event.srcmelement.files；
console.log（文件）；
}
}
@组件({
选择器：“我的应用程序”，
模板：`
`,
提供者：[上传服务]
})
导出类AppComponent{
档案：档案；
onChange（事件：EventTarget）{
让eventObj:MSInputMethodContext=event；
让target:HTMLInputElement=eventObj.target；
let files:FileList=target.files；
this.file=文件[0]；
console.log（this.file）；
}
doAnythingWithFile（）{
}
}
有一种稍微好一点的方式来访问附加文件。可以使用获取输入元素的实例
以下是基于第一个答案的示例：
@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" #file (change)="onChange(file.files)"/>
    </div>
  `,
  providers: [ UploadService ]
})

export class AppComponent {
  onChange(files) {
    console.log(files);
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
`,
提供者：[上传服务]
})
导出类AppComponent{
onChange（文件）{
console.log（文件）；
}
}

下面是一个例子来说明这一点
模板引用变量可能很有用，例如，您可以通过控制器中的@ViewChild直接访问它们。
试试这个小库，它适用于Angular 5.0.0



ng2文件上传1.3.0的快速启动示例：
用户点击自定义按钮，从隐藏输入type=“file”触发上传对话框，选择单个文件后自动开始上传
app.module.ts:
import {FileUploadModule} from "ng2-file-upload";

...
  <button mat-button onclick="document.getElementById('myFileInputField').click()" >
    Select and upload file
  </button>
  <input type="file" id="myFileInputField" ng2FileSelect [uploader]="uploader" style="display:none">
...

import {FileUploader} from 'ng2-file-upload';
...    
uploader: FileUploader;
...
constructor() {
   this.uploader = new FileUploader({url: "/your-api/some-endpoint"});
   this.uploader.onErrorItem = item => {
       console.error("Failed to upload");
       this.clearUploadField();
   };
   this.uploader.onCompleteItem = (item, response) => {
       console.info("Successfully uploaded");
       this.clearUploadField();

       // (Optional) Parsing of response
       let responseObject = JSON.parse(response) as MyCustomClass;

   };

   // Asks uploader to start upload file automatically after selecting file
  this.uploader.onAfterAddingFile = fileItem => this.uploader.uploadAll();
}

private clearUploadField(): void {
    (<HTMLInputElement>window.document.getElementById('myFileInputField'))
    .value = "";
}

your.component.html:
import {FileUploadModule} from "ng2-file-upload";

...
  <button mat-button onclick="document.getElementById('myFileInputField').click()" >
    Select and upload file
  </button>
  <input type="file" id="myFileInputField" ng2FileSelect [uploader]="uploader" style="display:none">
...

import {FileUploader} from 'ng2-file-upload';
...    
uploader: FileUploader;
...
constructor() {
   this.uploader = new FileUploader({url: "/your-api/some-endpoint"});
   this.uploader.onErrorItem = item => {
       console.error("Failed to upload");
       this.clearUploadField();
   };
   this.uploader.onCompleteItem = (item, response) => {
       console.info("Successfully uploaded");
       this.clearUploadField();

       // (Optional) Parsing of response
       let responseObject = JSON.parse(response) as MyCustomClass;

   };

   // Asks uploader to start upload file automatically after selecting file
  this.uploader.onAfterAddingFile = fileItem => this.uploader.uploadAll();
}

private clearUploadField(): void {
    (<HTMLInputElement>window.document.getElementById('myFileInputField'))
    .value = "";
}

。。。
选择并上传文件
...

您的.component.ts:
import {FileUploadModule} from "ng2-file-upload";

...
  <button mat-button onclick="document.getElementById('myFileInputField').click()" >
    Select and upload file
  </button>
  <input type="file" id="myFileInputField" ng2FileSelect [uploader]="uploader" style="display:none">
...

import {FileUploader} from 'ng2-file-upload';
...    
uploader: FileUploader;
...
constructor() {
   this.uploader = new FileUploader({url: "/your-api/some-endpoint"});
   this.uploader.onErrorItem = item => {
       console.error("Failed to upload");
       this.clearUploadField();
   };
   this.uploader.onCompleteItem = (item, response) => {
       console.info("Successfully uploaded");
       this.clearUploadField();

       // (Optional) Parsing of response
       let responseObject = JSON.parse(response) as MyCustomClass;

   };

   // Asks uploader to start upload file automatically after selecting file
  this.uploader.onAfterAddingFile = fileItem => this.uploader.uploadAll();
}

private clearUploadField(): void {
    (<HTMLInputElement>window.document.getElementById('myFileInputField'))
    .value = "";
}

从“ng2文件上传”导入{FileUploader}；
...    
上传器：文件上传器；
...
构造函数（）{
this.uploader=newfileuploader（{url://your-api/some-endpoint“}）；
this.uploader.onErrorItem=项目=>{
控制台错误（“上传失败”）；
这个.clearUploadField（）；
};
this.uploader.onCompleteItem=（项目，响应）=>{
console.info（“已成功上载”）；
这个.clearUploadField（）；
//（可选）解析响应
让responseObject=JSON.parse（response）作为MyCustomClass；
};
//要求上传者在选择文件后自动启动上传文件
this.uploader.onAfterAddingFile=fileItem=>this.uploader.uploadAll（）；
}
私有clearUploadField（）：void{
（window.document.getElementById（'myFileInputField'））
.value=“”；
}

替代库，在Angular 4.2.4中工作，但需要一些变通方法来适应Angular 5.0.0


使用模板引用变量和ViewChild的另一种方法，如Frelseren所建议的：
import { ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" #fileInput/>
    </div>
  `
})  
export class AppComponent {
  @ViewChild("fileInput") fileInputVariable: any;
  randomMethod() {
    const files = this.fileInputVariable.nativeElement.files;
    console.log(files);
  }
}

从'@angular/core'导入{ViewChild}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})  
导出类AppComponent{
@ViewChild（“fileInput”）fileInputVariable:任意；
随机方法（）{
const files=this.fileInputVariable.nativeElement.files；
console.log（文件）；
}
}

另请参见
如果您有一个包含多个文件和其他输入的复杂表单，这里有一个可以很好地使用ngModel
的解决方案
它由一个文件输入组件组成，该组件封装了一个简单的文件输入，并实现了ControlValueAccessor
接口，使其可供ngModel
使用。组件将文件列表
对象公开给ngModel

此解决方案基于本文
组件的使用方式如下所示：
<file-input name="file" inputId="file" [(ngModel)]="user.photo"></file-input>
<label for="file"> Select file </label>

下面是组件模板：
<input type="file" name="{{ name }}" id="{{ inputId }}" multiple="multiple" (change)="changeFile($event)"/>


只要试试（onclick）=“this.value=null”

在html页面中，添加onclick方法以删除以前的值，以便用户可以再次选择相同的文件
 我认为可能是出于设计，客户端无法为值生成JSON值……事实上，ngModel
可以用于生成JSON以外的其他用途；-）也许使用files
属性来设置绑定的ngModel
的值是可能的。。。我的2 centsonChange事件无法识别是否第二次上载了相同的文件，并且数据发生了更改。这似乎无效，事件
没有HTMLInputEvent类型的srcElement
属性。我使用这种方式上载了文件。看看它是否有用：嗨@Belter，这是我刚刚做的一个工作示例。您使用的是哪个版本的Ng？到底是什么不起作用？嗯，我用NG2.4.0和4.3.0都试过了（看起来你正在使用）。您还可以签入文档。你有什么错误吗？