点击.upload-button触发文件上传及Ajax请求失败问题求助

你的代码存在几个关键问题，导致Ajax请求无法正常触发：

1. trigger方法用法错误：trigger('click', function())的第二个参数不是回调函数，而是传递给事件处理程序的额外参数，所以你写的Ajax代码根本不会执行。
2. 时机逻辑错误：点击文件输入框后，需要等用户选择完文件（触发change事件）才能发起上传请求，而不是在触发点击时直接执行Ajax。
3. 文件上传方式错误：上传文件必须使用FormData对象，不能用普通键值对对象，而且你硬编码的'myfile'根本没获取到实际选中的文件。

修正后的代码 #

HTML部分保持不变：

<div class="user-avatar-wrapper"> 
  <img class="profile-pic" src="/placeholder.png" alt="" />
  <div class="upload-button"></div>
  <input class="file-upload" type="file" accept="image/*"/>
</div>

jQuery代码调整如下：

// 点击上传按钮，触发文件选择框的点击事件
$(document).on('click', '.upload-button', function(e) {
  e.preventDefault();
  $(this).next('.file-upload').click();
});

// 监听文件选择变化，用户选完文件后发起上传请求
$(document).on('change', '.file-upload', function() {
  // 获取用户选中的文件
  const selectedFile = this.files[0];
  if (!selectedFile) return; // 若用户取消选择，直接终止

  // 创建FormData对象，用于包装文件和其他参数
  const formData = new FormData();
  formData.append('title', 'Title');
  formData.append('file', selectedFile); // 传入实际选中的文件

  // 发起Ajax上传请求
  $.ajax({
    type: 'POST',
    url: 'upload.php',
    data: formData,
    // 必须设置这两个参数为false，否则jQuery会错误处理文件数据
    processData: false,
    contentType: false,
    success: function(response) {
      // 这里写上传成功后的逻辑，比如更新头像显示
      console.log('上传成功:', response);
    },
    error: function(xhr, status, error) {
      // 这里写上传失败后的逻辑
      console.error('上传失败:', error);
    }
  });
});

关键说明 #

• FormData是专门用于处理表单数据（含文件）的对象，能正确传递文件的二进制数据。
• processData: false阻止jQuery将FormData转换为字符串，contentType: false让jQuery自动设置符合文件上传要求的请求头，这两个参数是文件上传Ajax的必备配置。
• 先判断是否有选中文件，避免用户打开选择框后又取消操作时触发无效请求。

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