使用PHP和Ajax结合Filepond表单提交上传文件的问题求助

问题说明 #

使用Filepond插件上传图片到管理后台，服务器端PHP始终无法接收Imagem字段，提示文件为空，已尝试各类解决方案仍未解决。

前端代码 #

表单代码 #

<form name="Form__Send" enctype="multipart/form-data">
    <div class="card-header justify-content-between">
        <div class="card-title">Formulário</div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-6">
                <div class="mb-3">
                    <label class="form-label fs-14 text-dark" for="Imagem">Imagem</label>
                    <div class="filepond--div"><input type="file" class="multiple-filepond" id="Imagem" name="Imagem" accept="image/jpeg, image/png, image/webp" data-allow-reorder="true" data-max-files="4" data-max-file-size="3MB" multiple></div>
                </div>
            </div>
            <div class="col-12 text-center">
                <button type="submit" class="btn btn-success" id="Btn__Send">Enviar</button>
                <button type="button" class="btn btn-danger" id="Btn__Cancel">Cancelar</button>
            </div>
        </div>
    </div>
</form>

脚本代码 #

const MultipleElement = document.querySelector('.multiple-filepond');
const pond = FilePond.create(MultipleElement,{
    labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">TESTE</span>',
    instantUpload: false,
    allowProcess: false,
    storeAsFile: true
});

$(function(){
    $("form[name='Form__Send']").validate({
        ignore: [],
        onclick: false,
        onkeyup: false,
        rules:{
            Imagem:{
                required: true
            }
        },
        messages:{
            Imagem:{
                required: "<i class=\"ri ri-arrow-right-s-line\"></i> Adicionar imagem!<br />"
            }
        },
        submitHandler: function(form){
            Swal.fire({
                backdrop: 'rgba(0,0,0,0.15)',
                background: 'rgba(255,255,255,1)',
                cancelButtonColor: '#DD3333',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#228822',
                confirmButtonText: 'Enviar',
                customClass: {
                    cancelButton: 'btn btn-danger no-select',
                    confirmButton: 'btn btn-success no-select',
                    footer: 'no-select',
                    htmlContainer: 'no-select',
                    title: 'no-select'
                },
                focusCancel: false,
                focusConfirm: false,
                html: 'Você deseja enviar os dados inseridos no formulário?',
                icon: 'warning',
                showCancelButton: true,
                showCloseButton: false,
                showConfirmButton: true,
                title: 'Enviar formulário'
            }).then((result) => {
                if(result.value){
                    $(".myprogress").css('width','0');
                    var Fcn__Variable = new FormData();
                    const pondFiles = pond.getFiles();
                    // 修正字段名，与PHP接收的键一致，多文件重复append同一键名
                    for(var i = 0; i < pondFiles.length; i++){
                        Fcn__Variable.append('Imagem', pondFiles[i].file);
                    }
                    // 确保Titulo、Resumo等变量已正确定义
                    Fcn__Variable.append('Titulo', Titulo);
                    Fcn__Variable.append('Resumo', Resumo);
                    Fcn__Variable.append('Mensagem', Mensagem);
                    Fcn__Variable.append('ID_Blog_Categoria', ID_Blog_Categoria);
                    Fcn__Variable.append('ID_Blog_Tag', ID_Blog_Tag);
                    Fcn__Variable.append('Video', Video);
                    
                    $.ajax({
                        cache: false,
                        contentType: false,
                        data: Fcn__Variable,
                        dataType: 'text',
                        processData: false,
                        type: 'POST',
                        url: 'send-image.php',
                        // 修正进度监听写法，使用jQuery ajax的xhr选项
                        xhr: function() {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var nPercent = evt.loaded / evt.total;
                                    nPercent = parseInt(nPercent * 100);
                                    $(".myprogress").text(nPercent + "%");
                                    $(".myprogress").css("width", nPercent + "%");
                                }
                            }, false);
                            return xhr;
                        },
                        success: function(result){
                            console.log(result);
                        },
                        error: function(xhr, status, error){
                            console.error(error);
                        }
                    });
                }
            });
        }
    });
});

后端PHP代码（修正版） #

<?php
// 多文件上传时，$_FILES['Imagem']为数组，检查是否有有效文件
if(!isset($_FILES['Imagem']) || empty($_FILES['Imagem']['tmp_name'][0])){
    echo 'Erro/upload file!';
    exit;
}else{
    $filesNum = count($_FILES['Imagem']['name']);
    for($i = 0; $i < $filesNum; $i++){
        // 注意：直接使用原文件名存在安全风险，建议重命名文件并验证类型
        // $newFileName = uniqid() . '.' . pathinfo($_FILES['Imagem']['name'][$i], PATHINFO_EXTENSION);
        if(move_uploaded_file($_FILES['Imagem']['tmp_name'][$i], $_FILES['Imagem']['name'][$i])){
            // 上传成功逻辑
        }else{
            echo 'Falha ao mover arquivo ' . $_FILES['Imagem']['name'][$i];
        }
    }
    echo 'OK ('.$filesNum.")<br/>";
    exit;
}
?>

关键修复点 #

1. 字段名匹配：原JS代码追加的字段名为'Image'，与PHP接收的'Imagem'不一致，修正为统一的'Imagem'。
2. 多文件上传处理：循环中重复append同一字段名'Imagem'，PHP会自动将其解析为数组格式的$_FILES['Imagem']。
3. AJAX进度监听修正：原代码中Fcn__MyProgress不是jQuery ajax的合法参数，改为使用xhr选项实现进度监听。
4. PHP文件存在性检查：针对多文件上传场景，改为判断$_FILES['Imagem']['tmp_name'][0]是否为空，确保至少有一个有效文件上传。

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