Sending URI data via AJAX POST

Question

I got some trouble sending long text strings via html forms.

I want to send image data uri to a php page there can handle the data and save it in MySQL.

Image data example:

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..

The data is coming from a clipboard paste function I have on the page.

I have no problem in saving the data on the php page, but getting the data to the page makes trouble.

The script below is the one i try use to send the data from the client page:

formData = new FormData();
formData.append('imagedata','data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');
$.ajax({
    url: "test.php?reportid=1", 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData
}).done(function(e){
    alert(e);
});

It works fine if the image size is small, but if i got an image above 250KB, it loose data during the post.

Maybe someone has a better way to post the data to the server?

Instead of `data: formData` try `data: "imagedata=" + encodeURIComponent('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..')`. Other than that, do you randomly lose data or does it cap at a certain byte limit? — rndus2r, Sep 27 '17 at 13:10
yes i lose data, and it vary, if i use `data: "imagedata=" + encodeURIComponent('data:image....` how should i then receive it on the PHP page? $_POST? — Ramgaard, Sep 27 '17 at 13:54

score 4 · Accepted Answer · edited Nov 26 '22 at 05:16

I found an alternative to transfer the data.

Using this solution for converting base64 code to blob

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;

  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ia], {
    type: mimeString
  });
}

I change the code to this:

formData = new FormData();
var blob = dataURItoBlob('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');

formData.append('imagedata', blob, 'temp.png');

var request = new XMLHttpRequest();
request.open("POST", "test.php?reportid=1");
request.send(formData);

And then on the PHP page i receive data via $_FILES[];

$file = $_FILES['imagedata'];
$filetype = $file['type'];
$blob = file_get_contents($file['tmp_name']);

After that, can I insert it into the MySQL database.

Well, thanks anyway for the replies and suggestions :)

FANTASTIC. I was getting cross origin issues I couldn't solve on my host, transferring to blob and then back on the server for storage worked :) : ) — Andy, Jul 25 '18 at 04:38

score -1 · Answer 2 · answered Sep 27 '17 at 13:40

-1

try JSON.parse('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');

answered Sep 27 '17 at 13:40

D.M.

7
1

Sending URI data via AJAX POST

2 Answers2