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

Question

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?

4

You should use CORS instead. – SLaks Nov 28 '16 at 23:00

haitham · Accepted Answer · 2016-11-28T23:46:52.987

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?

thank you it`s the answer i wanted ... but i found that it will be bad if i uploaded more than one file , thank you so much — Mahmoud Mabrouk, Nov 30 '16 at 12:22

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

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.

edited May 23 '17 at 10:30

Community

1
1

answered Nov 28 '16 at 23:10

migueref

302
1
7

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

2 Answers2