转换 document.getElementById 以访问 TypeScript 中的文件

Casting document.getElementById to access files in TypeScript

本文关键字：文件 TypeScript 访问 document getElementById 转换      更新时间：2023-09-26

我对angularjs很陌生。我无法在线找到解决方案。我想从文件中读取文本。我试图效仿这个例子。FileReader 未使用 AngularJS 正确加载文件

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

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

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

请建议我如何投射以使用这些文件。

我发现的另一种解决方法是替换：

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

跟

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

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

从那个例子来看，这应该可以正常工作，也许你在那里做错了什么。但是，您可以像这样测试代码，将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>

你应该把它投射到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;
}
相关文章：