Search code examples
imagehtmlfileloadsrc

JavaScript load user's local image in browser after upload

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?

Solution

  • 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;