如何使用 FormData 将输入值传递给 ajax？答案

【问题标题】：How to pass input value to ajax using FormData?如何使用 FormData 将输入值传递给 ajax？
【发布时间】：2015-04-29 20:06:52
【问题描述】：

我正在尝试使用 ajax 和 php 上传图像，并且我已成功使其工作到一定程度，但我无法将输入的值 (ID) 传递给我的 php 文件。

这是我的场景。

表格

<form enctype="multipart/form-data" id="myform">
        <input type="file" name="images[]" multiple id="image"/>
</form>

按钮

<button type="button" id="uploadimages" name="thing_id" 
value="<?php echo $row['thing_id']; ?>" class="btn btn-primary">Save changes
</button>

AJAX

    $("#uploadimages").click(function () {
        var form = new FormData($('#myform')[0]);

        // Make the ajax call
        $.ajax({
            url: 'uploadimages.php',
            type: 'POST',
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', progress, false);
                }
                return myXhr;
            },
            //add beforesend handler to validate or something
            //beforeSend: functionname,
            success: function (res) {
                $('#content_here_please').html(res);
                /**/
            },
            //add error handler for when a error occurs if you want!
            //error: errorfunction,
            data: form,
            cache: false,
            contentType: false,
            processData: false
        });
    });

PHP

$get_id = $_POST['']; // This is where I stuck.

如何将$row['thing_id'] 传递给$get_id 变量？我可以在成功时使用另一个 GET ajax 调用传递它，但随后我丢失了 image_id 值（我使用 foreach 因为我可能会上传多个文件），所以我想在同一个 php 文件中处理它。

我没有包含我的上传脚本，因为除非我尝试使用 thing_id 进行制作，否则它可以正常工作。

【问题讨论】：

为什么不添加具有该值的隐藏输入字段并在 php 中接收它？ <input type="hidden" value="<?php echo $row['thing_id']; ?>" name="thing_id" id="thing_id" />

标签： javascript php jquery ajax

【解决方案1】：

在您的 ajax 代码中传递数据属性

$.ajax({
        url: 'uploadimages.php',
        type: 'POST',
        data:{upId:$("#uploadimages").val(),images:$('#uploadFieldId').val()},
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progress, false);
            }
            return myXhr;
        },
        //add beforesend handler to validate or something
        //beforeSend: functionname,
        success: function (res) {
            $('#content_here_please').html(res);
            /**/
        },
        //add error handler for when a error occurs if you want!
        //error: errorfunction,
        cache: false,
        contentType: false,
        processData: false
    });

然后您可以访问 php 文件中的 upId，因为我已经进行了更新，以便您可以将上传文件字段值也发送到 php 文件。更改 id 使其与字段匹配，您可以使用

检索此字段

$get_id = $_POST['upId'];

$image = $_POST['images'];

【讨论】：

你现在有两个数据属性（往下看）:)
@Harigovind R 当我从底部删除 data:form 时，我得到 Undefined index: thing_id 和 Undefined index: images 错误。
@salep 那是因为一旦您从数据中删除表单，您就不会将图像字段传递给 php。
@salep 如果您同时传递图像字段的值而不是传递整个表单，则会出现此错误
但我不使用表单，只是一个按钮。有解决办法吗？

【解决方案2】：

您有两种方法：

一个： value="<?php echo $row['thing_id']; ?>" 应该是表单#myform 的值/ID。

两个： 您可以按照 Harigovind R 所说的方式传递“thing_id”。

希望对你有帮助！

【讨论】：

【解决方案3】：

你有很多选择，比如添加隐藏的输入标签

带有name="uploadimages" 和一些期望值

或

将name="uploadimages" 添加到按钮可能会起作用，我不确定

【讨论】：