用 php 中的文件和其他输入处理发布的 formData 对象

Question

我需要处理来自表单 post 的输入，但我不知道如何在 php 中执行此操作，因为当我编写例如 $_POST["header"] 时，它 var_dumps null。

我正在创建 formData 对象并插入来自表单的所有输入。然后用ajax发布。

你能帮帮我吗？我需要处理“标题”、“内容”、“密码”和文件。

<form method="post" enctype="multipart/form-data" id="uploadFiles">
    <label for="newsHeader" id="headerLabel">Nadpis</label>
    <input type="text" name="newsHeader" id="newsHeader">
    <label for="content" id="contentLabel">Text novinky</label>
    <textarea name="content" id="content"></textarea>
    <label for="files" id="filesLabel">Fotky</label>
    <input type="file" name="files" id="files" accept="image/jpeg" multiple>
    <label for="password" id="passwordLabel">Heslo pro upload</label>
    <input type="text" name="password" id="password">
    <button type='submit' id='uploadFilesSubmit'>NAHRÁT</button>
</form>



$("#uploadFiles").submit(function(event){
        event.preventDefault();
        var formDataObj = new FormData(),
        header = $("#newsHeader").val(),
        content = $("#content").val(),
        password = $("#password").val();

        formDataObj.append("header", header);
        formDataObj.append("content", content);
        formDataObj.append("password", password);
        $.each($("#files")[0].files, function(i, file) {
            formDataObj.append('file', file);
        });

        console.log(Array.from(formDataObj));


        $("#uploadFilesSubmit").html("<div class='buttonSubmitIcon'><i class='fas fa-sync'></i></div>");
        $.ajax({
            method: "POST",
            url: "uploadNews.php",
            data: {
                formDataObj: formDataObj
            },
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function(results){

            }, error: function(){

            }

        });


    });

在 uploadNews.php 我有这个：

exit(json_encode(var_dump($_POST["header"])));

它总是返回“Undefined index: header”，与 content 或 count($_FILES["file"]["name"]) 相同

我只想以某种方式获得发布的值。非常感谢您

Answer 1

您只需通过您的$.ajax 传递实际的formDataObj 变量。这不是通过 ajax 传递 FormData 的正确 syntax => formDataObj: formDataObj

FormData 本身就是一个 object，它存储您的数据，所以当您通过 data 传递它时，您正在做的是在其上创建另一个 object

您现在可以var_dump(header) 或var_dump($_FILES["file"]["name"]) 查看您的PHP 文件中的所有内容。

现场演示：（将 jQuery 代码更改为下面的代码，它就可以正常工作了）

$("#uploadFiles").submit(function(event) {
  event.preventDefault();

  var formDataObj = new FormData(),
    header = $("#newsHeader").val(),
    content = $("#content").val(),
    password = $("#password").val();

  formDataObj.append("header", header);
  formDataObj.append("content", content);
  formDataObj.append("password", password);

  $.each($("#files")[0].files, function(i, file) {
    formDataObj.append('file', file);
  });

  $("#uploadFilesSubmit").html("<div class='buttonSubmitIcon'><i class='fas fa-sync'></i></div>");
  $.ajax({
    method: "POST",
    url: "uploadNews.php",
    data: formDataObj, //just pass the form Data object.
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function(results) {

    },
    error: function() {

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="uploadFiles">
  <label for="newsHeader" id="headerLabel">Nadpis</label>
  <input type="text" name="newsHeader" id="newsHeader">
  <label for="content" id="contentLabel">Text novinky</label>
  <textarea name="content" id="content"></textarea>
  <label for="files" id="filesLabel">Fotky</label>
  <input type="file" name="files" id="files" accept="image/jpeg" multiple>
  <label for="password" id="passwordLabel">Heslo pro upload</label>
  <input type="text" name="password" id="password">
  <button type='submit' id='uploadFilesSubmit'>NAHRÁT</button>
</form>