Passing an image to a data object in ajax

Question

Before I get to my problem, I apologize for the errors I'm going to make with the terminologies. New to jQuery and learning!

So I have a form with two fileds, text and a file type.

<form method="post" action="" enctype="multipart/form-data">
   text <input type='text' id="textf" /><br>
   images <input type='file' id="imagef" /><br>
   <button name="submit" type="submit" id="submit">Finish</button>
</form>

The image that is uploaded has to be compressed and then uploaded. (I got that part done!). The compressed image is then saved on the page below the form as a dataurl(?).

This format,

<img id="result_image" class="img_container" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... ">

Now, when the form is submitted the generated compressed image has to be uploaded instead on the original image.

I am using jquery to do so, but my lack of knowledge is getting in the way of doing so. Here's where I need your help, stackoverflow.

I've gotten this far,

$(document).ready(function(){
    $("#submit").click(function(e){
        e.preventDefault();

        var formData = {
            'textf'              : $('#textf').val(),
            'imagef'              : $('#result_image')[0]
        };

        $.ajax({
            type        : 'POST',
            url         : 'upload.php',
            data        : formData,
            dataType    : 'json',
            encode      : true
        })
    });
});

The response from the php script upload.php is,

fweArray
(
    [textf] => fwe
)

The image isn't there! What I'm I doing wrong her? I appreciate any help.

you dont need form data for this , just simply send the data uri of the image as a text and save it on the back end using php . Link: http://stackoverflow.com/a/30367094/2757519 — Dev Man, Sep 10 '16 at 08:08
@ImmortalDude OP is using a plain object to post data, not `FormData` object — guest271314, Sep 10 '16 at 08:12
@guest271314 sorry did not see it clearly , thought it was `FormData` object — Dev Man, Sep 10 '16 at 08:14

score 1 · Answer 1 · answered Sep 10 '16 at 08:08

1

You can post the .src of #result_image element to send data URI of compressed image to server

var formData = {
  'textf' : $('#textf').val(),
  'imagef' : $('#result_image')[0].src
};

answered Sep 10 '16 at 08:08

guest271314

1
15
104
177

Passing an image to a data object in ajax

1 Answers1