使用文件上传进行 JQuery 验证

Question

一段时间以来，我一直试图将文件从 ajax 获取到 php，但没有成功。所以我使用JQuery Validate

我有一个包含多个输入（姓名、电子邮件等）的表单，其中一个输入是文件类型。我执行所有验证，甚至在文件上，这一切都运行顺利。然后我来到 submitHandler 函数。根据我的阅读，过去通过 ajax 发送文件时会出现问题，但现在可以了。所以我在尝试

submitHandler: function (form) {
    var $form    = form,
        formData = new FormData(),
        params   = $form.serializeArray(),
        files    = $form.find('[name="fileOne"]')[0].files;

    $.each(files, function(i, file) {
        formData.append('uploadedFiles-' + i, file);
    });

    $.each(params, function(i, val) {
        formData.append(val.name, val.value);
    });

    $.ajax({
        type: "POST",
        url: "php/process.php",
        dataType: "json",
        data: formData
    }).done(function (response) {
        if (!response.success) {
            alert("Failed");
            console.log(response.errors);
        }
        else {
            alert("Worked");
        }
    });
    return false;
}

所以我希望这会获取我的文件 (fileOne) 并将其附加到我的表单数据中。但是，在 PHP 中，我现在只是这样做

try {
    if(isset($_FILES['fileOne'])){
        var_dump("IN");
    }
    else {
        var_dump("NO FILE");
    }

} catch (RuntimeException $e) {
    echo $e->getMessage();
}

很多时候它甚至没有命中这个 PHP，因为表单提交时获取所有数据的 url（这通常发生在 JQuery 有错误时）。当我让它工作时，我得到输出 No File。

那么我怎样才能将我上传的文件与我的表单数据的其余部分一起发送，以便我可以在 PHP 中处理它？

谢谢

Answer 1

你没有设置contentType: false, processData: false

 $.ajax({
    type: "POST",
    url: "php/process.php",
    dataType: "json",
    data: formData,
    mimeType: "multipart/form-data",
    contentType: false,
    processData: false
}).done(function (response) {
    if (!response.success) {
        alert("Failed");
        console.log(response.errors);
    }
    else {
        alert("Worked");
    }
});