如何使用jQuery将上传的图片发送至PHP脚本保存？

嗨，我来帮你搞定这个图片上传的问题！你已经搞定了图片预览的部分，接下来把图片传给PHP保存其实很简单，两种方案都给你讲清楚：

不需要把输入框放在传统表单里，用FormData配合jQuery的AJAX就能实现无刷新上传，这也是现在最常用的方式。

完整jQuery代码示例（结合你的预览逻辑） #

$(document).ready(function() {
  // 你的图片预览函数（补全了缺失的部分）
  var readURL = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.profile-pic').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  // 监听文件选择，触发预览
  $(".file-upload").on('change', function() {
    readURL(this);
  });

  // 监听上传按钮点击（假设你有个id为upload-btn的按钮）
  $("#upload-btn").on('click', function(e) {
    e.preventDefault();
    
    // 先检查有没有选择文件
    var fileInput = $('.file-upload')[0];
    if (!fileInput.files || !fileInput.files[0]) {
      alert("请先选择要上传的图片！");
      return;
    }

    // 创建FormData对象，用来包装文件数据
    var formData = new FormData();
    formData.append('profile_pic', fileInput.files[0]); // 'profile_pic'是PHP接收时的键名，可自定义

    // 发送AJAX请求到PHP脚本
    $.ajax({
      url: 'your-save-script.php', // 替换成你的PHP脚本路径
      type: 'POST',
      data: formData,
      processData: false, // 必须：禁止jQuery自动处理FormData数据
      contentType: false, // 必须：禁止jQuery设置Content-Type，浏览器会自动处理
      success: function(response) {
        // 上传成功后的逻辑，比如提示用户
        alert("图片上传成功！");
        console.log("PHP返回的信息：", response);
      },
      error: function(xhr, status, error) {
        // 处理上传失败的情况
        alert("上传出错了：" + error);
        console.error("详细错误信息：", xhr.responseText);
      }
    });
  });
});

如果你不介意页面刷新，也可以把文件输入框放在表单里，注意必须加enctype="multipart/form-data"属性，否则PHP接收不到文件。

HTML结构 #

<form action="your-save-script.php" method="POST" enctype="multipart/form-data">
  <input type="file" class="file-upload" name="profile_pic">
  <button type="submit">上传图片</button>
</form>

jQuery辅助逻辑（可选，用来做前置检查） #

$(document).ready(function() {
  var readURL = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.profile-pic').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $(".file-upload").on('change', function() {
    readURL(this);
  });

  // 监听表单提交，检查是否选择了文件
  $("form").on('submit', function(e) {
    var fileInput = $('.file-upload')[0];
    if (!fileInput.files || !fileInput.files[0]) {
      e.preventDefault(); // 阻止表单提交
      alert("请先选择图片！");
      return;
    }
    // 没问题的话，表单会自动提交到PHP脚本
  });
});

1. PHP端的权限：确保PHP脚本要保存图片的文件夹（比如./uploads/）存在，并且服务器有写入权限，不然会保存失败。
2. 文件接收键名：jQuery里formData.append('profile_pic', ...)的第一个参数，要和PHP里$_FILES['profile_pic']的键名一致。
3. AJAX的两个参数：processData: false和contentType: false必须设置，否则FormData无法正确传递文件。

快速回顾PHP处理逻辑（你已经了解，但再提个关键点） #

在你的PHP脚本里，通过$_FILES数组获取文件，然后用move_uploaded_file()保存到目标路径：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['profile_pic'])) {
  $uploadedFile = $_FILES['profile_pic'];
  
  // 检查上传是否出错
  if ($uploadedFile['error'] !== UPLOAD_ERR_OK) {
    echo "上传错误代码：" . $uploadedFile['error'];
    exit;
  }
  
  $targetDir = './uploads/';
  // 确保目录存在，不存在就创建
  if (!file_exists($targetDir)) {
    mkdir($targetDir, 0755, true);
  }
  $targetPath = $targetDir . basename($uploadedFile['name']);
  
  // 移动临时文件到目标路径
  if (move_uploaded_file($uploadedFile['tmp_name'], $targetPath)) {
    echo "文件已保存：" . $targetPath;
  } else {
    echo "保存失败，请检查文件夹权限！";
  }
} else {
  echo "未接收到上传文件！";
}
?>

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