How we can send JSON and Image file in AJax Request?

Question

i m facing problem with ajax request if i want to send image and json data in ajax request. I m getting images and Json Data both. But the json data is not binding automatically.

$("#btn").click(function () {
        var uploadfile =$("#uploadfile").files[0];
        var student = {
            Id: 1,
            Name:"ABC"
        }
        var formdata = new FormData();
        formdata.append("attachments", uploadedfile)
        formdata.append("model",JSON.stringify(student))
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Test")',
            contentType: false,
            processData: false,
            cache: false,
            data: formdata,
            success: function (data) {

            }
        });
    });

You cannot append a complex object to `Formdata` - you need to append each individual name/value pair - refer also [How to append whole set of model to formdata and obtain it in MVC](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Jan 19 '18 at 04:51
yes you are right.... if i serialize then i will get the string. My need is to send both complex object and image file. Thanks — Ashish Garg, Jan 19 '18 at 05:00
Read my first comment, including the link! You cannot. It needs to be `formdata.append("Id",1); formdata.append("Name","ABC");` — , Jan 19 '18 at 05:04

score 0 · Answer 1 · answered Jan 19 '18 at 16:21

0

var form_data = new FormData();
form_data.append( 'photo', photo );
form_data.append( 'name', name);
form_data.append('id', id);

This should work

answered Jan 19 '18 at 16:21

Kishor Malakar

81
1
6

How we can send JSON and Image file in AJax Request?

1 Answers1