JS介入后PHP图片上传报错：Undefined array key 'file'求助

问题现象 #

原本单独运行正常的图片拖拽上传代码，引入JS交互逻辑后，提交表单时PHP端出现多组Undefined array key 'file'警告，最终输出提示“无法上传该类型文件！”。

问题根源 #

问题出在JS的displayFile函数中：

dragArea.innerHTML = imgTag;

这段代码会完全替换dragArea容器内的所有DOM元素，包括原本存在的隐藏文件输入框<input type="file" name="file" hidden>。当表单提交时，页面中已经没有这个name为file的上传控件，自然无法向PHP传递文件数据，导致$_FILES['file']不存在，触发一系列警告，最终走到文件类型校验不通过的分支。

解决方案 #

提供两种可行的修复方案，按需选择：

方案1：调整DOM结构，保护文件输入框 #

把隐藏的文件输入框移到dragArea容器外面，这样替换dragArea的内容就不会影响到它：
修改后的HTML代码：

<form action="upload.php" method="POST" enctype="multipart/form-data">
     <div class="maincont">
         <h3>上传你的卡片</h3>
         <!-- 把文件输入框移到dragArea外 -->
         <input type="file" name="file" hidden>
         <div class="drag-area">
             <div class="icon">
                 <i class="fas fa-images"></i>
             </div>
             <span class="header">拖拽上传</span>
             <span class="header">或 <span class="button">选择文件</span></span>
             <span class="support">支持JEPG、JPG、PNG格式</span>
         </div>
         <button class="btn btn-primary" type="submit" name="submit">上传卡片</button>    
     </div>
</form>

同时修改JS中的输入框选择器，确保能正确选中：

// 精准选择name为file的输入框，避免冲突
let input = document.querySelector('input[name="file"]');

方案2：修改JS逻辑，保留原有DOM元素 #

不使用innerHTML替换整个容器内容，而是隐藏原有文本元素，再添加预览图片：
修改后的displayFile函数：

function displayFile() {
    let fileType = file.type;
    let validExtentions = ['image/jpeg', 'image/jpg', 'image/png'];

    if(validExtentions.includes(fileType)) {
        let fileReader = new FileReader();

        fileReader.onload = () => {
            let fileURL = fileReader.result;
            // 隐藏原有提示元素
            dragArea.querySelector('.icon').style.display = 'none';
            dragArea.querySelectorAll('.header').forEach(el => el.style.display = 'none');
            dragArea.querySelector('.support').style.display = 'none';
            // 创建并添加预览图片
            let imgTag = document.createElement('img');
            imgTag.src = fileURL;
            imgTag.alt = '预览图片';
            dragArea.appendChild(imgTag);
        };
        fileReader.readAsDataURL(file);
    } else {
        alert('这不是图片文件！');
        dragArea.classList.remove('active');
    }
}

额外优化：增强PHP代码健壮性 #

为了避免类似警告，在PHP代码开头先检查文件是否存在：

<?php
if (isset($_POST['submit'])) {
    // 先判断是否有文件上传
    if(!isset($_FILES['file']) || $_FILES['file']['error'] === UPLOAD_ERR_NO_FILE) {
        echo "请选择要上传的文件！";
        exit;
    }
    $file = $_FILES['file'];
    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png');

    if (in_array($fileActualExt, $allowed)) {
        if ($fileError === 0) {
            if ($fileSize < 50000) {
                $fileNameNew = uniqid('', true).".".$fileActualExt;
                $fileDestination = 'uploadsx/'.$fileNameNew;
                move_uploaded_file($fileTmpName, $fileDestination);
                header("Location: final.php?Nice");
                exit; // 跳转后终止代码执行
            } else {
                echo "文件体积过大！";  
            }  
        } else {
            echo "文件上传出错！错误码：".$fileError;
        }
    } else {
        echo "无法上传该类型文件！";
    }
}

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