Upload the image to localStorage and set the src image to this place

Question

I have successfully allowed the user to upload the image to local storage, but I want him to be able to then take this image and populate the image element on the page with this.

<h3>Please upload the image you wish to use.</h3> <input id="photoin" type="file" accept="image/*;capture=camera"></input> <a href="#delete_1" data-role="button" onClick="save()">Submit</a> <script> var i = 0; function save(){ var input = document.getElementById("photoin").value; var name = "photo_" + i; localStorage.setItem(name, input); $("#QR").src = window.localStorage[name]; i++; } </script> 

I am looking for something that will successfully give me the URL of the image in memory, since "window.localStorage [name]" returns only the value paired with this key.

Thanks!

Answer 1

Well, you can save the actual image data in localStorage (although be careful - there is a limit)

Check out the HTML5 camcorder tutorial and scroll down to the READING FILES heading .

Here the file is read, then the output is placed in the img: src tag. You can also add it to localStorage

Example: http://jsfiddle.net/8V9w6/ - select image file, see thumbnail? Then reload the page. The thumbnail should stay there. (The latest Chrome / Firefox works)