首页 > 解决方案 > 用 php 中的文件和其他输入处理发布的 formData 对象

问题描述

我需要处理来自表单发布的输入,但我不知道如何在 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"]) 相同

我想要的只是以某种方式获得发布的价值..非常感谢

标签: phpjqueryformsfilepost

解决方案


您只需formDataObj通过您的$.ajax. 这不是通过 ajaxsyntax传递的正确方法 =>FormDataformDataObj: formDataObj

FormData本身就是一个存储object您的数据的地方object,因此当您通过data

您现在可以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>


推荐阅读