Reputation: 177
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?
Upvotes: 4
Views: 3203
Reputation: 177
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 :)
Upvotes: 4
Reputation: 7
try JSON.parse('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');
Upvotes: -1