Javascript 如何在Angular 4中选择与chrome-like firefox相同的文件

我有一个编辑器，我可以添加多个文件，即使它们是相同的重复

在我的例子中，当我从Firefox中选择一个文件时，它将被添加到编辑器中。！ 当我第二次重新选择同一个文件时，它再次正确地添加到编辑器中。！工作正常

但是

当我第一次使用google chrome时，它工作正常，但是第二次，它不使用相同的文件，因为之前已经选择了相同的文件，所以当我取消并添加它添加的相同文件时，它不使用

我的HTML是这样的：

<input type="file"name="addFiles" multiple>

我正在使用Angular 4，我不想使用jquery，我该怎么做呢？

在Angular 4中上载文件

在my-fileupload.component.ts文件中

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl, FormBuilder} from '@angular/forms';

import { SendToService } './_service/service';

@Component({
    selector: 'app-my-fileupload',
    templateUrl: './app-my-fileupload.component.html',
    styleUrls: ['./app-my-fileupload.component.scss'],
    providers: [
        SendToService 
    ]
})

export class MyFileuploadComponent implements OnInit {

    @ViewChild('fileInput') fileInput: ElementRef;

    public MyForm : FormGroup;

    public Files = new FormControl();


    constructor(private fb: FormBuilder, private sendToService: 
    SendToService){}

    ngOnInit() {
        this.MyForm = this.fb.group({
            Files: this.Files,
        });
    }

    onFileChange(event) {
        if (event.target.files.length > 0) {
            this.filesToUpload = <Array<File>>event.target.files; // FILE 

            let size = 5 * 1024 * 1024; // 5MB
            for (let i = 0; i < this.filesToUpload.length; i++) {
                if (this.filesToUpload.size > 5000000) {
                    // Message for file size
                } else {
                    this.MyForm.get('Files').setValue(this.filesToUpload);
                }
            }
        }
    }
    onSubmit(){
        const formObj = this.UploadFile.getRawValue();
        this.sendToService.UploadFile(formObj).subscribe(response => {
            console.log(response) // response = success
            if (response == success) {
                this.MyForm.reset();
            }
        }
    }
}

我们使用ViewChild和ElementRef访问输入

您应该使用[ngModel]，没有[ngModel]是不可能的吗？请参阅此

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl, FormBuilder} from '@angular/forms';

import { SendToService } './_service/service';

@Component({
    selector: 'app-my-fileupload',
    templateUrl: './app-my-fileupload.component.html',
    styleUrls: ['./app-my-fileupload.component.scss'],
    providers: [
        SendToService 
    ]
})

export class MyFileuploadComponent implements OnInit {

    @ViewChild('fileInput') fileInput: ElementRef;

    public MyForm : FormGroup;

    public Files = new FormControl();


    constructor(private fb: FormBuilder, private sendToService: 
    SendToService){}

    ngOnInit() {
        this.MyForm = this.fb.group({
            Files: this.Files,
        });
    }

    onFileChange(event) {
        if (event.target.files.length > 0) {
            this.filesToUpload = <Array<File>>event.target.files; // FILE 

            let size = 5 * 1024 * 1024; // 5MB
            for (let i = 0; i < this.filesToUpload.length; i++) {
                if (this.filesToUpload.size > 5000000) {
                    // Message for file size
                } else {
                    this.MyForm.get('Files').setValue(this.filesToUpload);
                }
            }
        }
    }
    onSubmit(){
        const formObj = this.UploadFile.getRawValue();
        this.sendToService.UploadFile(formObj).subscribe(response => {
            console.log(response) // response = success
            if (response == success) {
                this.MyForm.reset();
            }
        }
    }
}

import { Injectable, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

@Injectable()
export class SendToService {

    Url_app = 'url';

    constructor(private _http: Http) { }

    UploadFile(formObj: any) {

        let formData = new FormData();

        for (let i = 0; i < formObj.length; i++) {
            formData.append('Files[]', formObj[i], formObj[i]['name']);
        }

        return this._http.post( Url_app , formData);
    }
}

<input id="Files" type="file" #filesInput (change)="onFileChange($event)" 
       [multiple]="true" />

@ViewChild('fileInput') fileInput: ElementRef;

this.filesInput.nativeElement.value = ""