SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question AJAX base64 Parameter

    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:

    HTML Code:
    var paramsQ = ... "&b64=" + b64;
    JavaScript code on same page where AJAX call is made:

    HTML Code:
     <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:

    PHP Code:
    $data $_POST['b64'];
    echo 
    $data

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. I just needed to add a line prior to my echo statement:

    $data = str_replace(' ','+',$data);


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •