如何在用户选择文件后用Ajax访问并读取该文件内容？

你可以通过两种常见方式实现：读取文件内容后发送，或者直接上传文件对象，以下是具体实现：

一、基础HTML结构 #

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

二、方法1：读取文件内容再通过Ajax发送（适合文本类文件） #

利用FileReader API读取文件内容，再通过Ajax将内容发送到后端：

document.getElementById('fileInput').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  // 文件读取完成后的回调
  reader.onload = function(event) {
    const fileContent = event.target.result; // 这里就是文件的内容

    // 用fetch发送Ajax请求（也可以用XMLHttpRequest）
    fetch('/your-api-url', {
      method: 'POST',
      headers: {
        'Content-Type': 'text/plain' // 根据文件类型调整，比如JSON文件用application/json
      },
      body: fileContent
    })
    .then(res => res.json())
    .then(result => {
      console.log('内容发送成功:', result);
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
  };

  // 根据文件类型选择读取方式：
  // - readAsText：读取文本文件（TXT/JSON等）
  // - readAsDataURL：将文件转为Base64编码（适合图片/音频）
  // - readAsArrayBuffer：读取二进制数据（比如PDF/压缩包）
  reader.readAsText(selectedFile);
});

三、方法2：用FormData直接上传文件对象（适合完整文件上传） #

如果需要将整个文件作为表单数据上传，使用FormData封装文件后发送：

document.getElementById('fileInput').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const formData = new FormData();
  formData.append('uploadedFile', selectedFile); // 'uploadedFile'是后端接收的字段名

  // 发送Ajax请求
  fetch('/your-upload-url', {
    method: 'POST',
    body: formData
    // 注意：不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头
  })
  .then(res => res.json())
  .then(result => {
    console.log('文件上传成功:', result);
  })
  .catch(err => {
    console.error('上传失败:', err);
  });
});

补充说明 #

• FileReader是浏览器原生API，支持所有现代浏览器，无需额外依赖。
• 若使用XMLHttpRequest代替fetch，逻辑类似：创建XHR实例、设置onload回调、调用open()和send()方法（传入文本内容或FormData）。
• 后端需要对应处理请求：发送文本时解析plain text格式，上传文件时解析multipart/form-data格式的表单数据。

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