CODEWITHSUNDEEP
javascriptphpajaxjsonp
Mahmoud Mabrouk
Mahmoud Mabrouk

Reputation: 733

How can I send an image using jsonp to a server?

I am developing app and using Javascript's method 'jsonp' to send and get data to and from php & MYSQL server, because the app is not on the same server where I save the data to.

Can I send the image to that server using the same method of jsonp, like encode it or use binary or something?

Upvotes: 1

Views: 846

Answers (2)

haitham
haitham

Reputation: 3536

You can base64 encode the image and send it as a string. You would do something along these lines client side:

var the_file = new Blob([window.atob(base_64_string)], { type: 'image/png', encoding: 'utf-8' });
var fr = new FileReader();
fr.onload = function (oFREvent) {
    var v = oFREvent.target.result.split(',')[1];
    v = atob(v);
    var good_b64 = btoa(decodeURIComponent(escape(v)));
    img.src = "data:image/png;base64," + good_b64;
    img.onload = function () {
        //do stuff here
    };
};
fr.readAsDataURL(the_file);

As @SLaks hinted at in his comment, consider using a CORS header for your endpoint instead of jsonp, but not necessary.

Not sure what your use case is, but why not just use a link to the image?

Upvotes: 2

migueref
migueref

Reputation: 302

You can't stream the image using jsonp. You have two alternatives use an iframe trick:

Or you can use websockets

If you encode your image base 64 in json string the image you'd be limited to file sizes.

Upvotes: 1

Related Questions