I am trying to send a base64 string of an image as a parameter in an AJAX call to a PHP script. So far, if I echo the posted base64 string data in my PHP script, it displays the long string, but without (+) signs. How can I preserve the (+) signs when passing the base64 string as a parameter in JavaScript? I know I must encode it using JavaScript and then decode it via PHP, but I don’t have the slightest idea of how to do it properly; I know the encoding can happen on the parameter line, but I also know it can be done in a place such as under either of my 2 comments about encoding b64 (preference). Thanks.
Here’s a snippet from my AJAX parameter code:
var paramsQ = ... "&b64=" + b64;
JavaScript code on same page where AJAX call is made:
<script type='text/javascript'>
var b64 = '';
function rPh1(){
b64 = '';
document.getElementById('list1').innerHTML='';
document.cookie="b64n=" + '';
document.getElementById('input').innerHTML="<input type='file' id='files' />";
if (window.FileReader) {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (
function(theFile) {
//validate file type and size
var ext1 = theFile.name.substring(theFile.name.lastIndexOf('.') + 1);
if(ext1 === 'png' || ext1 === 'PNG' || ext1 === 'jpg' || ext1 === 'JPG' || ext1 === 'jpeg' || ext1 === 'JPEG'){
var fSize = (theFile.size)/(1000);
if(fSize <= 500){
b64n = theFile.name;
return function(e) {
//Encode b64 - can't figure out
b64 = e.target.result;
document.cookie="b64n=" + b64n;
document.getElementById('list1').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="200px" height="230px" />'].join('') + '<br/>Name: ' + theFile.name + '<br/>' + 'Size: ' + fSize + ' KB' + "<input type='button' id='X' onclick='rPh1()' value='X'>";
};
}else{
alert('Image must be less than or equal to 500 KB.');
}
}else{
alert('You can only upload png, jpg, or jpeg files.');
}
}
)(f);
reader.readAsDataURL(f);
}
}
}
document.write("<span id='fileupload'><span id='upload'><span id='input'><input type='file' id='files' /></span><span id='cover' style='display:block;position:absolute;color:#F1F1F1;border:1px solid #F1F1F1;background-color:#F1F1F1;z-index:500;width:200px;top:0px;left:80px'>.</span></span><br/><span id='list1'></span></span>");
if (window.FileReader) {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (
function(theFile) {
//validate file type and size
var ext1 = theFile.name.substring(theFile.name.lastIndexOf('.') + 1);
if(ext1 === 'png' || ext1 === 'PNG' || ext1 === 'jpg' || ext1 === 'JPG' || ext1 === 'jpeg' || ext1 === 'JPEG'){
var fSize = (theFile.size)/(1000);
if(fSize <= 500){
b64n = theFile.name;
return function(e) {
//Encode b64 - can't figure out
b64 = e.target.result;
document.cookie="b64n=" + b64n;
document.getElementById('list1').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="200px" height="230px" />'].join('') + '<br/>Name: ' + theFile.name + '<br/>' + 'Size: ' + fSize + ' KB' + "<input type='button' id='X' onclick='rPh1()' value='X'>";
};
}else{
alert('Image must be less than or equal to 500 KB.');
}
}else{
alert('You can only upload png, jpg, or jpeg files.');
}
}
)(f);
reader.readAsDataURL(f);
}
}
</script>
PHP script being called:
$data = $_POST['b64'];
echo $data;