0

I am using a PHP file uploader to enable a user to upload images. However, due to some issues it is not working at all - the images are not uploading and the PHP script is not even creating an (empty in such cases) entries in a file. As a workaround, I am trying to use base64 encoding. The user clicks the input button which executes a little JS function. It reads the said image via readAsDataURL() and then uses onload to change the src of the img tag to this result. The function: 

function readIMGURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#theIMG').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

(Thanks to meVeekay here: https://stackoverflow.com/a/16207641/4112779)

This works well for displaying the preview of the image in the desired place. However, to complete the course of my application, the entire contents of the parent div is copied and placed in another location (or another div, another file, parent div processed by a script and placed in another div, etc)

The said div:

<div id="toCopy">
<img src="#" alt="" id="theIMG">
</div>

And the calling button:

<form style="  margin-top: 10%;" id="imageform" >        
   <input style=" margin-top: 10%;" class="input-btn" type="file" onChange="readIMGURL(this);">            
</form>

After "uploading" the image, it is posted via XMLHttpRequest to a working PHP script which does its job based on the above toCopy.

(I'm suspicious that the $content = str_replace("\\", "", $content); I added in the PHP script to remove extra escape sequences added during the POST may be messing up with the base64 text, but as far as I know, base64 doesn't have \ anywhere. Also, I have tried removing this instruction to no avail)

Eventually, in the final result, the image does not appear, instead a missing image image appears.

What could I be doing wrong, and what may be the possibilities to solve it? Do I need to further modify the JS variable(s)/encode something else to enable it to be viewed as a proper base64 image?

All possibilities and proper explanations would be appreciated.

Community
  • 1
  • 1
the42guy
  • 5
  • 2
  • You're going to need to upload the code which reproduces this result - it's too difficult to ascertain exactly what behavior your script is exhibiting (and how to fix it) without actually seeing it. – jonny Dec 01 '15 at 16:09
  • @ᴊᴏɴᴀᴛʜᴀɴʙʀᴏᴏᴋs this is the only code of any consequence on the image selected. Adding the other parts which I feel maybe related, nevertheless. – the42guy Dec 01 '15 at 16:18
  • That's not necessarily true - clearly the code you've provided isn't the point of failure here. It would be good to have some context. – jonny Dec 01 '15 at 16:19
  • @ᴊᴏɴᴀᴛʜᴀɴʙʀᴏᴏᴋs I have added the code, can you please ponder over it? – the42guy Dec 01 '15 at 16:32

0 Answers0