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

Question

I am trying to upload images using ajax and php and I have managed to make it work to a certain level successfully, but I can't make my input's value (ID) pass to my php file.

Here's my scenario.

FORM

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

Button

<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.

How can I pass $row['thing_id'] to $get_id variable? I can pass it using another GET ajax call on success, but then I lose the image_id value (I use foreach since I may upload multiple files), so I want to handle it in the same php file.

I didn't include my upload script because it works unless I try to make something using thing_id.

Answer 1

in your ajax code pass the data attribute

$.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
    });

then you can access the upId in your php file as,i have made an updation so that you can send the upload file field value also to the php file. Change the id so that it matches the field and you can retrieve this field using

$get_id = $_POST['upId'];

$image = $_POST['images'];