如何用JavaScript/jQuery/Ajax向localhost的upload.html提交文件？

嘿，我来帮你搞定这个文件上传的需求！要在index.html里通过JS/jQuery向你的upload.html页面提交文件，核心是利用FormData对象来包装文件数据，再通过AJAX发送请求。下面给你两种常用的实现方式：

这种方式不需要依赖任何库，纯原生JS就能搞定。首先给你的文件输入框和提交按钮加上ID，方便获取元素：

<!-- index.html里的表单 -->
<form>
  <input type="file" id="upload-file">
  <input type="submit" id="upload-btn" value="Submit">
</form>

然后添加JavaScript代码：

// 获取页面元素
const fileInput = document.getElementById('upload-file');
const submitBtn = document.getElementById('upload-btn');

// 监听提交按钮点击事件，阻止默认表单提交
submitBtn.addEventListener('click', async (e) => {
  e.preventDefault();

  // 检查是否选择了文件
  if (!fileInput.files.length) {
    alert('请先选择要上传的文件！');
    return;
  }

  // 创建FormData对象，包装文件数据
  const formData = new FormData();
  // 'file'是后端接收文件的字段名，要和upload.html对应的处理逻辑保持一致
  formData.append('file', fileInput.files[0]);

  try {
    // 发送POST请求到upload.html
    const response = await fetch('http://127.0.0.1/upload.html', {
      method: 'POST',
      body: formData
      // 不需要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data请求头
    });

    if (response.ok) {
      alert('文件上传成功！');
      // 如果需要上传后跳转到upload页面，可以加上这行
      window.location.href = 'http://127.0.0.1/upload.html';
    } else {
      alert('文件上传失败，请重试！');
    }
  } catch (error) {
    console.error('上传过程出错:', error);
    alert('上传时发生错误，请检查控制台信息！');
  }
});

如果你已经在项目中使用了jQuery，这种方式会更简洁。同样先给元素加ID：

<!-- index.html里的表单 -->
<form>
  <input type="file" id="upload-file">
  <input type="submit" id="upload-btn" value="Submit">
</form>

然后编写jQuery代码：

// 监听提交按钮点击事件
$('#upload-btn').click(function(e) {
  e.preventDefault(); // 阻止默认表单提交行为

  const fileInput = $('#upload-file')[0];
  // 检查是否选择了文件
  if (!fileInput.files.length) {
    alert('请先选择要上传的文件！');
    return;
  }

  // 创建FormData对象包装文件
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);

  $.ajax({
    url: 'http://127.0.0.1/upload.html',
    type: 'POST',
    data: formData,
    processData: false, // 必须设为false，否则jQuery会错误地处理FormData
    contentType: false, // 必须设为false，让浏览器自动设置正确的请求头
    success: function() {
      alert('文件上传成功！');
      // 可选：上传完成后跳转到upload页面
      window.location.href = 'http://127.0.0.1/upload.html';
    },
    error: function(xhr, status, error) {
      console.error('上传出错:', error);
      alert('文件上传失败，请重试！');
    }
  });
});

重要注意事项 #

• 纯静态HTML页面是无法处理文件上传的！你的upload.html背后必须有后端逻辑（比如PHP、Node.js等）来接收并存储上传的文件，否则请求发送后不会有实际的文件存储效果。
• 确保FormData.append里的字段名（比如示例中的file）和后端接收文件的字段名完全一致。
• 测试时请在本地服务器环境下运行（比如用XAMPP、Live Server插件等），不要直接双击打开本地HTML文件，避免出现跨域或协议相关的问题。

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