使用JQuery定义的Typescript和文件上传

Typescript and File Upload with JQuery Definitions

本文关键字：文件 Typescript JQuery 定义 使用      更新时间：2023-09-26

我使用typescript，我有一个文件上传表单。但是我的打字结果是错误的。

$('body').on('change', '#upload_button input[type="file"]', (evt)=>{
    let file_list = evt.target.files;
});

错误:

属性'files'在'Element'类型上不存在

如何修复这个错误?

记住$(…)总是返回一个元素列表。获取第一个(也是唯一的)带有[0]的，并将其强制转换为HTMLInputElement。

$('body').find('#upload_button input[type="file"]')
    .on('change', (evt: JQuery.TriggeredEvent) => {
        let input = <HTMLInputElement>$(evt.currentTarget)[0];
        let file_list = input.files;
        //...
    });

注意files是HTMLInputElement的成员

For typescript file不是HTMLElement类型的方法。尝试将元素的类型更改为HTMLInputElement

例子

let fileInput : HTMLInputElement = <HTMLInputElement>document.getElementById('input');

错误Property 'files' does not exist on type 'Element'为我解决了:

$('body').on('change', '#upload_button input[type="file"]', (evt)=>{
  evt.preventDefault()
  const fileInput: HTMLInputElement = <HTMLInputElement>document.querySelector(event.currentTarget);
  const file = fileInput.files[0];
  ...  
});
相关文章：