Javascript FormData对象仅获取文件输入，而不获取文本等其他输入

我对使用

FormData

对象相当陌生，但仍在努力熟悉它的工作原理。因此，我设法将一个视频文件发布到一个php脚本中，该脚本负责将视频文件上传/移动到一个文件夹中。但是，我不能传递或发布其他表单输入信息，例如在表单的文本字段中键入的文本

我的目标是将所有formdata（视频文件和输入字段上的文本）传递/发布到php脚本。我尝试了

var\u dump

$\u POST

数组，以查看除了

$\u文件['file']

之外是否还有其他数据发布

我能得到文件输入，但不能得到文本输入。我想只需单击一个按钮即可发送所有formdata

下面是我从

var\u dump（）

-ing

$\u POST

和

$\u文件中得到的信息

array(0) {
}
array(1) {
  ["file"]=>
  array(5) {
    ["name"]=>
    string(48) "How to Create App Shortcut on Ubuntu Desktop.mp4"
    ["type"]=>
    string(9) "video/mp4"
    ["tmp_name"]=>
    string(14) "/tmp/phprG6kRC"
    ["error"]=>
    int(0)
    ["size"]=>
    int(10522522)
  }
}

它显示
var\u dump（$\u POST）

index.php

<form id="myForm" method="POST" enctype="multipart/form-data">

    <label>Lastname: &nbsp;</label> <input type="text" name="lastname" id="lastname" required/><br/>
    <label>Firstname: &nbsp;</label> <input type="text" name="firstname" id="firstname" required/><br/>
    <label>Middlename: &nbsp;</label> <input type="text" name="middlename" id="middlename" required/><br/>
    <label class="modal_label" id="modalLbl_browseVideo">
        Select Video
        <input type="file" name="file" id="file_input" value="Select Video" accept="video/*"/>
    </label>

    <button name="myButton" id="myButton">
        Upload
    </button>
    <br/>
    <label id = "errorLabel"></label>

</form>

<script src="js/jquery-3.3.1.js"></script>
<script src="js/index.js"></script>

var_dump($_POST);
var_dump($_FILES);

echo $_POST['lastname'];
echo $_POST['firstname'];
echo $_POST['middlename'];

upload.php

<form id="myForm" method="POST" enctype="multipart/form-data">

    <label>Lastname: &nbsp;</label> <input type="text" name="lastname" id="lastname" required/><br/>
    <label>Firstname: &nbsp;</label> <input type="text" name="firstname" id="firstname" required/><br/>
    <label>Middlename: &nbsp;</label> <input type="text" name="middlename" id="middlename" required/><br/>
    <label class="modal_label" id="modalLbl_browseVideo">
        Select Video
        <input type="file" name="file" id="file_input" value="Select Video" accept="video/*"/>
    </label>

    <button name="myButton" id="myButton">
        Upload
    </button>
    <br/>
    <label id = "errorLabel"></label>

</form>

<script src="js/jquery-3.3.1.js"></script>
<script src="js/index.js"></script>

var_dump($_POST);
var_dump($_FILES);

echo $_POST['lastname'];
echo $_POST['firstname'];
echo $_POST['middlename'];

我的理解是，
var formData=newformdata（$（'#myForm'）[0]）
使用表单拥有并包含在
formData
变量中的所有数据初始化。但它只在
var\u dump（）

为什么它不能显示发布的其他表单数据值，例如姓氏、名和中间名

如果有任何建议，我将不胜感激

谢谢。
我可以通过将值附加到
formData
对象来解决我的问题。最适合我要做的事

index.js

$('#myButton').click(function(){
    upload(); 
});

function upload() {
    var formData = new FormData($('#myForm')[0]); //initialized with myForm 

    $.ajax({
        url: 'upload_video.php',
        type: 'POST',
        data: formData,
        cache: false;
        processData: false,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
            console.log(data);
            alert(data);
        },
        error: function (x, e) {
            if (x.status == 0) {
                alert('You are offline!!\n Please Check Your Network.');
            } else if (x.status == 404) {
                alert('Requested URL not found.');
            } else if (x.status == 500) {
                alert('Internal Server Error.');
            } else if (e == 'parsererror') {
                alert('Error.\nParsing JSON Request failed.');
            } else if (e == 'timeout') {
                alert('Request Time out.');
            } else {
                alert('Unknown Error.\n' + x.responseText);
            }
        }
    });
}

function uploadVideo() {
    var formData = new FormData();
    var videoFile = $("#file_input")[0].files[0];
    formData.append('file', videoFile);
    formData.append('lastname',$('#lastname').val());
    formData.append('firstname',$('#firstname').val());
    formData.append('middlename',$('#middlename').val());

    $.ajax({
        url: 'upload_video.php',
        type: 'POST',
        data: formData,
        cache: false,
        processData: false,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
            console.log(data);
            // alert(data);
        },
        error: function (x, e) {
            testForError(x,e);
        }
    });
}

upload.php

<form id="myForm" method="POST" enctype="multipart/form-data">

    <label>Lastname: &nbsp;</label> <input type="text" name="lastname" id="lastname" required/><br/>
    <label>Firstname: &nbsp;</label> <input type="text" name="firstname" id="firstname" required/><br/>
    <label>Middlename: &nbsp;</label> <input type="text" name="middlename" id="middlename" required/><br/>
    <label class="modal_label" id="modalLbl_browseVideo">
        Select Video
        <input type="file" name="file" id="file_input" value="Select Video" accept="video/*"/>
    </label>

    <button name="myButton" id="myButton">
        Upload
    </button>
    <br/>
    <label id = "errorLabel"></label>

</form>

<script src="js/jquery-3.3.1.js"></script>
<script src="js/index.js"></script>

var_dump($_POST);
var_dump($_FILES);

echo $_POST['lastname'];
echo $_POST['firstname'];
echo $_POST['middlename'];

我测试了它，当我
console.log（data）时，我能够从
success:function（data）{}
获得lastname、firstname和middlename值作为响应

这应该作为其他人尝试并可能解决与此相关的问题的参考