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.
