源码：

report-add.component.html

<a routerLink="/report-list">返回</a>
<div id="report-add">
    <div>新建报告：</div>
    <table>
        <tr>
            <td>报告标题：</td>
            <td><input type="text" [(ngModel)]="report.title"></td>
        </tr>
        <tr>
            <td>被引作者：</td>
            <td><input type="text" [(ngModel)]="report.author"></td>
        </tr>
        <tr>
            <td>论文列表：</td>
            <td><input type="file" (change)="fileChange($event)"></td>
        </tr>
        <tr>
            <td>时间跨度：</td>
            <td>从<select [(ngModel)]="report.beginYear">
                <option *ngFor="let i of beginlist">{{ i }}</option>
            </select>至<select [(ngModel)]="report.endYear">
                <option *ngFor="let i of endlist">{{ i }}</option>
            </select></td>
        </tr>
        <tr>
            <td></td>
            <td><button (click)="submit()">确定</button></td>
        </tr>


    </table>
</div>

report-add.component.ts

import {ReportService} from "./report.service";
import {Component, OnInit} from "@angular/core";
import {Report} from "../model/report";
/**
 * Created by Lv on 2016/12/15.
 */

@Component({
    selector: 'report-add',
    styleUrls: ['app/report/report-add.component.css'],
    templateUrl: `app/report/report-add.component.html`
})
export class ReportAddComponent implements OnInit{

    private beginlist: number[] = this.range(1900,2016);
    private endlist: number[] = this.range(2016,1900);

    private report:Report = new Report();
    private excelFile:File;

    ngOnInit(): void {
        this.report.beginYear=this.beginlist[0];
        this.report.endYear=this.endlist[0];
    }

    fileChange($event:any): void {
        if(!$event.target.files){return;}
        if($event.target.files.length>0){
            this.excelFile=$event.target.files[0];
        }
    }

    submit(){
        var url="http://localhost:8080/refer/report_create.action";
        let xhr = new XMLHttpRequest();
        let form = new FormData();
        form.append("excel", this.excelFile, this.excelFile.name);
        form.append("report.title",this.report.title);
        form.append("report.author",this.report.author);
        form.append("report.beginYear",this.report.beginYear);
        form.append("report.endYear",this.report.endYear);
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                this.finished();
            }
        };
        xhr.open("post", url, true);
        xhr.send(form);

    }

    finished(){
        alert("已填加");
    }



    private range(begin: number, end: number): number[]{
        let list: number[] = [];
        if(begin<end){
            for (let i = begin; i<=end;i++){
                list.push(i);
            }
        }else{
            for (let i = begin; i>=end;i--){
                list.push(i);
            }
        }
        return list;
    }
}

重点代码：

report-add.component.html

<td><input type="file" (change)="fileChange($event)"></td>
file控件绑定change事件，传递参数$event.

report-add.component.ts

fileChange($event:any): void {
        if(!$event.target.files){return;}
        if($event.target.files.length>0){
            this.excelFile=$event.target.files[0];
        }
    }

接收file控件事件触发时的参数$event,获取file对象。

submit(){
        var url="http://localhost:8080/refer/report_create.action";
        let xhr = new XMLHttpRequest();
        let form = new FormData();
        form.append("excel", this.excelFile, this.excelFile.name);
        form.append("report.title",this.report.title);
        form.append("report.author",this.report.author);
        form.append("report.beginYear",this.report.beginYear);
        form.append("report.endYear",this.report.endYear);
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                this.finished();
            }
        };
        xhr.open("post", url, true);
        xhr.send(form);

    }

使用XMLHttpRequest和FormData对象发送提交操作，xhr.onreadystatechange绑定事件获取提交返回信息。