使用jQuery获取文件输入的files属性时显示undefined的解决方法

问题原因 #

jQuery选择器返回的是jQuery包装后的对象，而非原生的HTMLInputElement节点，直接访问$('input[type="file"]').files自然会得到undefined——因为这个属性只存在于原生DOM元素上。

解决方法 #

你需要先从jQuery对象中获取到原生DOM元素，或者使用jQuery的.prop()方法直接读取属性，两种方式都能拿到正确的FileList对象。

方法1：通过索引获取原生DOM元素 #

jQuery对象本质是包含DOM元素的类数组，通过[0]可以取出第一个匹配的原生元素：

$('#btn').click(function() {
  // 获取原生DOM元素
  const fileInput = $('#your-file-input')[0];
  // 读取files属性
  const files = fileInput.files;
  
  if (files.length > 0) {
    // 遍历文件信息
    for (let i = 0; i < files.length; i++) {
      console.log(`文件名：${files[i].name}`);
      console.log(`文件大小：${files[i].size}字节`);
      console.log(`文件类型：${files[i].type}`);
    }
  }
});

方法2：使用jQuery的.prop()方法 #

.prop()方法可以直接获取DOM元素的原生属性，包括files：

$('#btn').click(function() {
  const files = $('#your-file-input').prop('files');
  
  if (files.length > 0) {
    // 转成数组后遍历
    Array.from(files).forEach(file => {
      console.log(`文件名：${file.name}`);
      console.log(`文件大小：${file.size}字节`);
      console.log(`文件类型：${file.type}`);
    });
  }
});

补充说明 #

• 如果文件输入框开启了多选（设置了multiple属性），files会是一个类数组的FileList对象，包含所有选中的文件
• 操作前建议先判断files.length > 0，避免用户未选择文件时出现错误

内容的提问来源于stack exchange，提问作者mostafa-jamali