Is it possible to send a file object in this way?

Question

I am beginner in jquery. I am trying to send a File object which i get from my html:

 <label for="photo" class="col-xs-2">Photo</label>
 <input id="photo" name="fileName" type="file" class="col-xs-4"/>

This is my JavaScript:

 var file = $('#photo')[0].files[0];
 console.log(file);

 var data = { name: name, dob: dob,fname: fname,mob: mob,mName: mName, Email: Email, NID: NID,password: password,District: District,Thana: Thana,gender: gender,file: file };
 $.ajax({url: "singleUpload",
                type: "POST",
                data:data,
                contentType: false,
                success: function (response) 
                {
                $("#academic").html(response);
                console.log("ajax ok");
                }    
 });

I don't want to use new FormData() or iFrame.

Any help will be appreciated.

Farhad Bagherlo · Accepted Answer · 2017-08-26T04:55:15.733

 <form>
 <label for="photo" class="col-xs-2">Photo</label>
 <input id="photo" name="fileName" type="file" class="col-xs-4"/>
 </form>

$('form').on('submit', uploadFiles);

// Catch the form submit and upload the files
 function uploadFiles(event)
{
  var file = $('#photo')[0].files[0];
    console.log(file);
    var Jsondata = { name: name, dob: dob,fname: fname,mob: mob,mName: mName, Email: Email, NID: NID,password: password,District: District,Thana: Thana,gender: gender,file: file }; 
    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // START A LOADING SPINNER HERE

    // Create a formdata object and add the files
    var data = new FormData();
    $.each(Jsondata , function(key, value)
    {
        data.append(key, value);
    }); 

     $.ajax({
            url: 'singleUpload',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(data, textStatus, jqXHR)
            {
                if(typeof data.error === 'undefined')
                {
                    // Success so call function to process the form
                    submitForm(event, data);
                }
                else
                {
                    // Handle errors here
                    console.log('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
                // STOP LOADING SPINNER
            }
        });
    }

score -1 · Answer 2 · answered Aug 26 '17 at 04:46

 var data = { name: name, dob: dob,fname: fname,mob: mob,mName: mName, Email: Email, NID: NID,password: password,District: District,Thana: Thana,gender: gender,file: file };
 $.ajax({url: "singleUpload",
                type: "POST",
                data:JSON.stringify(data),
                 dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (response) 
                {
                $("#academic").html(response);
                console.log("ajax ok");
                }    
 });

you can pass an object using this data:JSON.stringify(data)

Thanks who answered. FormData object seems to be useful. I've done this task through formdata.append() method. I got the formdata value from formdata.get() method. By the way Spring controller was a huge heck. I got the formdata key in spring controller by @RequestParam(value="keyname"). I could not post my solution due to i have accepted one answer. Hope it will help someOne. — RidwanulHaque, Aug 27 '17 at 03:33

Is it possible to send a file object in this way?

2 Answers2