Ajax提交含文本与文件的表单时PHP端$_POST与$_FILE为空问题求助

存在的问题 #

• HTML字段配置错误
  1. 姓名输入框id为myname，JS中选择器错误使用#name，无法获取到输入值
  2. 标题输入框的name属性重复设置为name，会和姓名字段冲突，正确应为title
• Ajax传参逻辑错误
  你将已经组装好的FormData实例外层又套了一层普通对象{form_data}，配合processData: false的配置，后端无法正确解析传过去的表单字段，直接导致三个字段都识别不到

修正后的代码 #

修正后的HTML代码 #

<form method = "POST" enctype = "multipart/form-data" id="myform">
    <label class="form-label text-start">Enter your Name</label>
    <input class="form-control"  name="name" type="text" id="myname" placeholder="John">
    
    <label class="form-label">Title</label>
    <input class="form-control" type="text" name="title" id="title" placeholder="Operator">

    <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)</label>
    <input class="form-control"  name="file" id="imgfile" type="file">
</form>

修正后的JS代码 #

var file_data = $('#imgfile').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
// 修正选择器，正确获取姓名输入框的值
form_data.append('name', $('#myname').val());
form_data.append('title', $('#title').val());
$.ajax({
        type: 'POST',
        dataType: 'text', 
        cache: false,
        contentType: false,
        processData: false,
        url: 'save_data.php',
        // 直接传FormData实例，不要额外套对象
        data: form_data,
        success: function(data){
            alert(data)
            window.location = 'account.php';
        }                      
});

PHP端优化建议（可选，避免异常报错） #

// 先判断字段是否存在，避免未定义索引报错
if(isset($_POST['name'], $_POST['title'], $_FILES['file'])){
    $name = $_POST['name'];
    $title = $_POST['title'];
    $file = $_FILES['file'];
    // 后续业务逻辑
}

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