Html OnChange类型脚本输入

当从输入（文件）中选择文件时，我希望能够触发on更改。我希望触发的事件将文本框设置为文件名

我正在使用HTML5、Typescript和Angular2。我想不出或找不到一个确切的例子来说明如何产生我所追求的行为

请参见下面的我的代码：

组件。ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

@Component({
    selector: 'testConnection',
    // ignore error on require
    template: require('./testConnection.component.html')
})
export class TestConnectionComponent {
    public http: Http;
    public requestData: RequestData;


    public constructor(http: Http) {
        this.http = http;

        (<HTMLInputElement>document.getElementById('fileInput')).onchange = (ev: Event) => {
            var fileInput = (<HTMLInputElement>ev.srcElement).files[0];

            var fileTextbox = (<HTMLInputElement>document.getElementById('fileTextbox'));
            fileTextbox.value = fileInput.name;
        }
    }


    public testButtonClick() {

        // Iniatialise Request object
        let request: RequestData;
        request = { "CountryCode": "", "SiteIDList": "" };

        // Get site(s)
        var siteIdList = (<HTMLInputElement>document.getElementById('siteIDInput')).value;

        // Get selected country
        var countryCode = (<HTMLInputElement>document.getElementById('countryDropdown')).value;

        // Veryify contents is just site ids. 
        // TODO
        request.CountryCode = countryCode;
        request.SiteIDList = siteIdList;


        // Set Http POST options
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        // Call Api with test connection data 
        this.http
            .post('/api/TestConnection/TestConnection', JSON.stringify(request), options)
            .subscribe(data => {
                // alert request ok
                alert('ok');
            }, error => {
                // Log error
                console.log(error.json());
            });
    }
}

interface RequestData {
    SiteIDList: string;
    CountryCode: string;
}

从'@angular/core'导入{Component}；
从'@angular/Http'导入{Http}；
从'@angular/http'导入{Headers，RequestOptions}；
@组成部分({
选择器：“testConnection”，
//根据需要忽略错误
模板：require（“./testConnection.component.html”）
})
导出类TestConnectionComponent{
公共http:http；
公共requestData：requestData；
公共构造函数（http:http）{
this.http=http；
（document.getElementById（'fileInput'））.onchange=（ev:Event）=>{
var fileInput=（ev.srcmelement）.files[0]；
var fileTextbox=（document.getElementById（'fileTextbox'）；
fileTextbox.value=fileInput.name；
}
}
公共测试按钮单击（）{
//初始化请求对象
let请求：RequestData；
请求={“CountryCode”：“”“SiteIDList”：“”}；
//获取站点
var siteIdList=（document.getElementById（'siteIDInput'））.value；
//获取选定国家/地区
var countryCode=（document.getElementById（'countryDropdown'））.value；
//Veryify内容只是站点ID。
//待办事项
request.CountryCode=CountryCode；
request.SiteIDList=SiteIDList；
//设置Http POST选项
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
//使用测试连接数据调用Api
这是http
.post（'/api/TestConnection/TestConnection'，JSON.stringify（请求），选项）
.订阅（数据=>{
//警报请求正常
警报（“正常”）；
}，错误=>{
//日志错误
log（error.json（））；
});
}
}
接口请求数据{
SiteIDList:string；
国家代码：字符串；
}

component.html

<h2>Test Site Connection</h2>

<p>This will allow you to check the connectivity of a set of sites by either individually or uploading a CSV file of Site IDs.</p>
<br />
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Manual Test</h3>
    </div>
    <div class="panel-body">
        <p>
            Select the country and the sites you want to test.
        </p>
        <ul>
            <li>Multiple sites can be selected using commas (,).</li>
            <li>you can see results in the Site Connection Results tab</li>
        </ul>
        <br />
        <!--Replace with lookup to enabled countries-->
        <div class="form-group col-lg-4">
            <div class="col-lg-6">
                <select class="form-control" id="countryDropdown">
                    <option>Select Country</option>
                    <option>US</option>
                    <option>SG</option>
                    <option>NL</option>
                </select>
            </div>
        </div>
        <div>
            <div class="col-lg-4">
                <input type="text" class="form-control" placeholder="SiteID(s)" id="siteIDInput" />
            </div>
            <button class="btn btn-primary" (click)="testButtonClick()">Test</button>
        </div>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Upload file</h3>
    </div>
    <div class="panel-body">
        <div>
            <p>Upload a CSV file of sites to test all at once.</p>
            <br />
            <div class="col-lg-4">
                <input type="text" class="col-lg-4 form-control" id="fileTextbox" disabled/>
            </div>
            <label class="btn btn-primary">
                Browse <input type="file" id="fileInput" style="display:none;" onchange="{ setFileName() }"/>
            </label>
            <button class="btn btn-primary" (click)="searchButtonClick()">Test</button>
        </div>
    </div>
</div>

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

测试站点连接
这将允许您通过单独或上载站点ID的CSV文件来检查一组站点的连接



手动测试

选择要测试的国家/地区和站点。


可以使用逗号（，）选择多个站点
您可以在“站点连接结果”选项卡中查看结果



选择国家
美国
SG
NL
试验
上传文件
上载站点的CSV文件以一次性测试所有站点



浏览
试验
&时代；
情态标题
一个好身体

接近
保存更改

尝试使用（更改）事件绑定

 <input type="file" id="fileInput" style="display:none;" (change)="setFileName()"/>

---

如果您需要在上传文件之前检索文件名，您可以通过以下方式进行操作：

@Component({
    selector: 'my-app',
    template: `
      <div>
        <input type="file" (change)="onChange($event)"/>
      </div>
      <p>Filename : {{filename}}</p>
    `,
    providers: []
})
export class AppComponent {
  filename: string;
  constructor() { }

  onChange(event) {
    this.filename = event.srcElement.files[0].name;
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
文件名：{{Filename}

`,
提供者：[]
})
导出类AppComponent{
文件名：字符串；
构造函数（）{}
onChange（事件）{
this.filename=event.srcmelement.files[0].name；
}
}

---

这是一个

我肯定我试过了，但不管这次它实际起了什么作用，谢谢你。