var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function () { // 在这里处理选择的文件 });

要使用`<input>`元素和JavaScript来处理文件输入，你可以执行以下操作：

1. **读取文本文件内容**[^1]:

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

// 文件改变事件监听器
fileInput.addEventListener('change', (event) => {
  // 创建FileReader对象
  const reader = new FileReader();

  // 当文件读取完成时，会触发onload事件
  reader.onload = (e) => {
    // 打印读取到的内容（对于文本文件）
    console.log(reader.result);
  };

  // 开始读取文件
  reader.readAsText(event.target.files[0]);
});

2. **读取并显示图片文件**:

fileInput.addEventListener('change', (event) => {
  const reader = new FileReader();
  
  reader.onload = (e) => {
    // 创建一个新的Image对象
    const img = new Image();
    
    // 设置图像的src属性为读取的结果
    img.src = reader.result;
    
    // 添加图片到文档体中
    document.body.appendChild(img);
  };
  
  // 以data URL的形式读取文件
  reader.readAsDataURL(event.target.files[0]);
});

3. **分割文件（如CSV）**:
由于没有直接的CSV分割方法，但你可以使用第三方库如papaParse来解析CSV文件。首先，安装papa-parse：

npm install papaparse

然后，在脚本中添加分割逻辑：

import Papa from 'papaparse';

fileInput.addEventListener('change', async (event) => {
  const reader = new FileReader();
  reader.onload = async (e) => {
    const csvData = e.target.result;
    const parsedData = await Papa.parse(csvData, { header: true }); // 假设有表头
    console.log(parsedData.data); // 分割后的数组
  };
  reader.readAsText(event.target.files[0]);
});

注意，这仅适用于CSV文件。其他类型的文件可能需要不同的处理方式。