在JavaScript中使用jQuery获取文件输入框的文件大小失败问题

嘿，我来帮你捋捋这个问题哈~

问题核心出在jQuery对象和原生DOM元素的区别上：你用$('#formIncidencia').find("[id='archivo']")拿到的是jQuery包装后的对象，而.files是原生<input type="file">元素的专属属性，jQuery对象本身并没有这个属性，所以直接访问肯定会失效。

给你几个可行的解决办法：

• 方法1：通过数组下标提取原生元素
  jQuery对象是类数组结构，直接用[0]就能取出对应的原生DOM元素，之后再访问.files属性就正常了：

  $('#formIncidencia').find("[id='archivo']")[0].files[0].size
  

• 方法2：使用jQuery的.get()方法
  .get(0)和数组下标效果一致，也是用来取出原生元素的：

  $('#formIncidencia').find("[id='archivo']").get(0).files[0].size
  

• 方法3：更简洁的选择器（如果id唯一的话）
  因为HTML里id是全局唯一的，你其实可以直接通过id选择器获取元素，不用绕父form查找：

  $('#archivo')[0].files[0].size
  

另外，为了避免没选文件时出现报错，建议先判断是否有选中文件再获取大小：

const fileInput = $('#formIncidencia').find("[id='archivo']")[0];
if (fileInput.files.length > 0) {
    const fileSize = fileInput.files[0].size;
    console.log("文件大小：", fileSize);
} else {
    console.log("请先选择要上传的文件哦");
}

内容的提问来源于stack exchange，提问作者okjfokjrf