C#文件上传：选择文件后立即调用函数的实现方法

这事儿其实很简单，咱们利用文件输入框的change事件就能实现无需点击按钮，选中文件后立刻触发指定函数的需求。下面给你完整的可运行示例：

1. HTML 部分 #

首先创建一个文件选择输入框，不需要额外的提交按钮：

<input type="file" id="fileInput">

2. JavaScript 部分 #

接下来编写你的两个函数FileSelected()和CheckFileType()，并给输入框绑定change事件：

// 获取文件输入框元素
const fileInput = document.getElementById('fileInput');

// 绑定change事件：选中文件后立即触发
fileInput.addEventListener('change', function() {
  FileSelected(this.files);
});

function FileSelected(files) {
  // 先判断是否有选中文件
  if (files.length === 0) {
    console.log('没有选中任何文件');
    return;
  }
  // 获取第一个选中的文件（如果允许多选可以遍历files数组）
  const selectedFile = files[0];
  console.log('选中的文件:', selectedFile.name);
  // 调用文件类型检查函数
  CheckFileType(selectedFile);
}

function CheckFileType(file) {
  // 示例：检查文件是否为图片类型
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (allowedTypes.includes(file.type)) {
    console.log('文件类型符合要求');
    // 这里可以写后续的处理逻辑，比如预览、上传等
  } else {
    console.log('不支持的文件类型，请选择图片文件');
  }
}

补充说明 #

• 如果需要支持多选文件，只需要给input加上multiple属性：<input type="file" id="fileInput" multiple>，然后在FileSelected()里遍历files数组即可。
• 注意：有些浏览器中，如果用户重复选择同一个文件，change事件不会再次触发。如果需要处理这种场景，可以在事件触发后重置输入框的值：fileInput.value = '';，这样下次选同一个文件也能触发事件。

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