Question

I need to let user load one image from her local file system into the browser for some editing.

I don’t wanna use flash or others. Only HTML and JavaScript.

So what I do is to let user upload the image to the server and the server returns the contents of the file (using php file_get_contents).

Now I have the contents of the image file as a string in JavaScript. I expected to assign this string to the src of an image element and it shows up. But when I assign it to src, nothing happens.

What’s wrong? What’s the solution?

Answer 1

src means an URL.

Either set that to an URL on the server, or use a Base64 encoded image:

PHP:

$imagedata = file_get_contents($file);
$encoded = base64_encode($imagedata);
echo $encoded;

JavaScript:

var imageElem = document.getElementById('image');
var filetype = 'png'; // Set file type here
imageElem.src = 'data:image/' + filetype + ';base64,' + image;