CropperJS+PHP裁剪图片上传问题求助：提交后仍上传原图

你的推测完全正确——表单提交的还是原始文件输入框里的原图，裁剪后的图片只更新了预览，但没同步到表单的可提交数据里。按以下步骤修改代码：

1. 给表单添加隐藏的文件输入 #

在<form>标签内新增一个隐藏input，用来存储裁剪后的文件：

<form action="index.php" method="post" id="uploadForm" enctype="multipart/form-data">
  <!-- 保留原有所有表单元素 -->
  <input type="hidden" id="croppedFileInput" name="file">
</form>

注：如果想直接覆盖原文件字段，这个隐藏input的name设为file即可，原文件输入可以改名为original_file（后端对应调整读取字段，或直接用隐藏字段覆盖）。

2. 修改applyCroppedImage函数，同步裁剪后文件到表单 #

替换原applyCroppedImage函数，把裁剪得到的Blob转为File对象，赋值给隐藏输入：

function applyCroppedImage() {
  cropper.getCroppedCanvas().toBlob(function(blob) {
    // 获取原文件信息，将Blob转为同名（后缀改为jpeg）的File对象
    const originalFile = document.getElementById('uploadInput').files[0];
    const croppedFile = new File([blob], originalFile.name.replace(/\.[^/.]+$/, ".jpeg"), {
      type: 'image/jpeg',
      lastModified: Date.now()
    });

    // 用DataTransfer对象设置文件输入的值
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(croppedFile);
    document.getElementById('croppedFileInput').files = dataTransfer.files;

    // 更新预览图并关闭模态框
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      document.getElementById('preview').src = reader.result;
      closeModal();
    };
  }, 'image/jpeg', 0.6);
}

3. 可选：表单提交前校验（防止未裁剪就提交） #

给表单添加提交拦截，确保只有裁剪后的文件被提交：

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  const croppedFile = document.getElementById('croppedFileInput').files[0];
  if (!croppedFile) {
    e.preventDefault();
    alert('请先完成图片裁剪再提交');
    return;
  }
  // 可选：清空原文件输入，避免冗余数据
  document.getElementById('uploadInput').value = '';
});

修改完成后，表单提交时就会发送裁剪后的图片，而非原图。

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