7

I've successfully allowed for a user to upload an image to local storage but I want to be able to then take that image and fill an image element on the page with that. 

<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'm looking for something that will successfully give me the URL of the image in storage, seeing as "window.localStorage[name]" only returns the value paired with that key.

Thanks!

Jones
  • 1,480
  • 19
  • 34
NodeNodeNode
  • 215
  • 1
  • 3
  • 9
  • 1
    Why exactly you want do do that? Is browser cache not enough to keep your images on host machine? – Marcelo De Zen Jul 20 '12 at 15:41
  • I want the user to be able to change the content on a page (i.e. I want the user to upload their image, not mine, and then have that image appear on the page) – NodeNodeNode Jul 20 '12 at 15:55
  • I get it! Mayge you can convert the image to base64 and then put in src="data:image/png;<..base64 image data...>". You will must use HTML5 file api to read the image file then convert the data to base64. This post will help you on convertion: http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript#246813 – Marcelo De Zen Jul 20 '12 at 16:08

1 Answers1

12

Well you can store the actual image data in localStorage (though be wary - there's a limit)

Have a look at the HTML5 rocks tutorial & scroll down to the bit headed READING FILES

Here the file is being read then the output put in the img:src tag. You could additionally put it in localStorage

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

paulslater19
  • 5,869
  • 1
  • 28
  • 25