粘贴图片表单提交后PHP无法获取文件问题求助

原本代码可实现粘贴图片后直接上传存储，修改为点击提交按钮上传粘贴的图片数据时，使用readAsText将图片数据存入隐藏字段，提交后print_r($_POST)显示file数据在POST数组中，但PHP端报错Notice: Undefined index: file，目标目录也没有生成文件。

相关代码 #

JS代码 #

$(document).ready(function() {
  $('#pasteTarget').on('paste', function(e) {
    e.preventDefault();
    var data = e.originalEvent;
    
    if (data.clipboardData && data.clipboardData.items) {
      var items = data.clipboardData.items;
      for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          var file = items[i].getAsFile();
          var reader = new FileReader();
          reader.onload = function() {
            $('<input>').attr('type', 'hidden').attr('name', 'file[]').appendTo('form').val(reader.result);
          };
          reader.readAsText(file);
        }
      }
    }
  });
  
  $('#subfile').on('click', function(e) {
    var form = $('form')[0];
    var data = new FormData(form);
    
    $.ajax({
      type: 'POST',
      url: 'postfileuploader.php',
      data: data,
      contentType: false,
      processData: false,
      cache: false,
      success: function(result) {
        console.log(result);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div style="width: 200px; height: 200px; background: grey" id="pasteTarget">
    Click and paste here.
  </div>
  <button type="button" name="sub" id="subfile" class="btn btn-primary">Create Tasks</button>
</form>

PHP代码（postfileuploader.php） #

<?php
echo $fileName = $_FILES['file'][0]['name'];
echo $fileType = $_FILES['file'][0]['type'];
echo $fileError = $_FILES['file'][0]['error'];
?>

报错与输出 #

• 报错信息：Notice: Undefined index: file in F:\xampp745\htdocs\xxx\postfileuploader.php on line X
• print_r($_POST)结果：Array ( [file] => Array ( [0] => 文件内容的Base64编码文本 ) )

问题原因 #

• 用readAsText读取图片文件并将内容存入隐藏字段时，传递的是Base64编码的文本内容，并非标准的文件上传格式。PHP只会把通过multipart/form-data格式上传的File对象放入$_FILES数组，这种文本内容只会被放到$_POST里，所以读取$_FILES['file']会报错。
• 隐藏输入框无法模拟标准文件上传的File对象传递，这是核心问题。

修正方案 #

1. 修改JS代码：直接存储File对象并提交 #

不需要用隐藏字段，直接把粘贴得到的File对象存储起来，提交时追加到FormData中，符合PHP文件上传规范：

$(document).ready(function() {
  // 存储粘贴的图片文件
  let pastedImages = [];

  $('#pasteTarget').on('paste', function(e) {
    e.preventDefault();
    const data = e.originalEvent;
    
    if (data.clipboardData && data.clipboardData.items) {
      const items = data.clipboardData.items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          const file = items[i].getAsFile();
          pastedImages.push(file);
          
          // 可选：添加图片预览
          const reader = new FileReader();
          reader.onload = function() {
            $('<img>').attr('src', reader.result).css('max-width', '100%').appendTo('#pasteTarget');
          }
          reader.readAsDataURL(file);
        }
      }
    }
  });
  
  $('#subfile').on('click', function() {
    const form = $('form')[0];
    const formData = new FormData(form);
    
    // 将存储的图片文件添加到FormData
    pastedImages.forEach((file, index) => {
      // 自定义文件名，避免无名称的情况
      const fileName = file.name || `pasted_image_${index + 1}.png`;
      formData.append('file[]', file, fileName);
    });
    
    $.ajax({
      type: 'POST',
      url: 'postfileuploader.php',
      data: formData,
      contentType: false,
      processData: false,
      cache: false,
      success: function(result) {
        console.log(result);
      },
      error: function(err) {
        console.error(err);
      }
    });
  });
});

2. 修改PHP代码：正确处理$_FILES并存储文件 #

完善文件接收逻辑，添加目录创建、错误处理：

<?php
// 上传目录，确保有写入权限
$uploadDir = './uploaded_images/';

// 如果目录不存在则创建
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 检查是否有上传的文件
if (isset($_FILES['file']) && $_FILES['file']['error'][0] !== UPLOAD_ERR_NO_FILE) {
    foreach ($_FILES['file']['tmp_name'] as $index => $tmpPath) {
        $fileError = $_FILES['file']['error'][$index];
        $fileName = $_FILES['file']['name'][$index];
        $targetPath = $uploadDir . basename($fileName);
        
        if ($fileError === UPLOAD_ERR_OK) {
            // 移动临时文件到目标目录
            if (move_uploaded_file($tmpPath, $targetPath)) {
                echo "文件 {$fileName} 上传成功，路径：{$targetPath}<br>";
            } else {
                echo "文件 {$fileName} 移动失败<br>";
            }
        } else {
            echo "文件 {$fileName} 上传错误，错误码：{$fileError}<br>";
        }
    }
} else {
    echo "没有接收到上传的文件";
}
?>

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