How to pass an ajax input value using FormData?

I am trying to load images using ajax and php and I managed to make it work at a certain level successfully, but I cannot pass my input value (ID) to my php file.

Here's my scenario.

THE 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 do I pass a variable $row['thing_id']

to $get_id

? I can pass it using another GET ajax call on success, but then I lost the image_id value (I am using foreach since I can upload multiple files) so I want to process it in the same php file.

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

+3


source to share


3 answers


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 did the update so that you can send the value of the upload file field to the php file as well. Change the id to match the field and you can get that field using

$ get_id = $ _POST ['upId'];

$ image = $ _POST ['images'];

+1


source


You have two :

One: This value="<?php echo $row['thing_id']; ?>"

should be the value / id of your #myform.



Two: You can pass "thing_id" as Harigovind R. said.

Hope it helps!

0


source


You have many options like adding hidden input tag

with name="uploadimages"

and some desired value

or

Added name="uploadimages"

so the button can work, I'm not sure about this

0


source







All Articles