强制转换 document.getElementById 以访问 TypeScript 中的文件答案

【问题标题】：Casting document.getElementById to access files in TypeScript强制转换 document.getElementById 以访问 TypeScript 中的文件
【发布时间】：2016-06-18 22:35:34
【问题描述】：

我对 angularjs 很陌生。我无法在网上找到解决方案。我想从文件中读取文本。我试图遵循这个例子。 FileReader not loading file properly using AngularJS

但是，由于我使用的是 TypeScript，因此我收到此行的此错误

document.getElementById('fileInput').files[0];

错误：类型“HTMLElement”上不存在属性“文件”。

请建议我如何强制转换以使用这些文件。

【问题讨论】：

它与打字稿无关，它是普通的javascript

标签： javascript html angularjs file-upload typescript

【解决方案1】：

我发现问题中错误的另一种方法是替换：

document.getElementById('fileInput').files[0];

与

var input: any = document.getElementById('fileInput');
var file = input.files[0];

通过将输入定义为“any”类型，Typescript 编译器不再引发错误。

【讨论】：

【解决方案2】：

从该示例中应该可以正常工作，也许您在那里做错了什么。但是，您可以像这样测试您的代码，将fileChanged() 替换为fileChanged(event)，然后通过event.target.files 获取文件

function fileChanged(event) {
  var target = event.target || event.srcElement;
  console.log(target.files);
  console.log(document.getElementById('fileInput').files);
}

<div>
  <input ng-model="csv"
            onchange="fileChanged(event)"
            type="file" id="fileInput"/>
</div>

【讨论】：

非常感谢您的建议。 target.files 似乎工作。但是，我无法像这样实现 document.getElementById('fileInput').files) 。调试时它似乎工作正常并且我正在获取值，但是由于我使用的是 TypeScript，因此在编写代码时它会抛出错误。文件阅读器在 lib.d.ts
我在尝试实施您的解决方案时仍然遇到另一个问题。 stackoverflow.com/questions/35816670/…
我会尝试调查这个问题，但从来没有在剑道上工作过:(

【解决方案3】：

您应该将其转换为 HTMLInputElement。该接口将.files 字段定义为FileList

/**
 * Returns a FileList object on a file type input object.
 */
readonly files: FileList | null;

interface FileList {
    readonly length: number;
    item(index: number): File;
    [index: number]: File;
}

【讨论】：