0

I have an image like this

<input type="file" name="pic_file" id="photo_file">
<img id="image_holder" src="" />

The <img> source is set by the user, though a file input as seen in above code. I want the img to be linked with an <a> but since the I have not saved the image yet I cant put a relative link to the full size image. How could I use the cached version of the image that is being displyed and use that as a link that would be something like this

 <a href="cached_img with id=image_holder"><img id="image_holder" src="" /></a>

The user woudl have uploaded an image at this point so the src woudl not be empty

Thanks

iqueqiorio
  • 989
  • 2
  • 30
  • 73
  • ` – aug Nov 29 '15 at 09:10
  • ***since the I have not save and dont want to save the image to the server*** - So where will it go then? In order to link to it, it must he stored somewhere. – ggdx Nov 29 '15 at 09:11
  • @DanWhite I am saving it to a database, I am wondering if without getting it from that database, since it has to be saved on the current page somewhere, can I use that to display it, do you know what I mean? – iqueqiorio Nov 29 '15 at 09:12
  • Then read up on BLOB - https://developer.mozilla.org/en/docs/Web/API/Blob – ggdx Nov 29 '15 at 09:13
  • @DanWhite I know how to save and what to save it as, but I am saying it has not been saved until the user clicks the final submit, so can I show it full screen cause it must be cached somewhere on the current page – iqueqiorio Nov 29 '15 at 09:15
  • Then yes. Yes you can. Now, unless you are going to show us what you have done (code), what you can't make work, etc, there's nothing we can do to help. We are not a free coding service and I care very little for guessing what you want from a badly explained question. – ggdx Nov 29 '15 at 09:18
  • @aug could you help me, I have updated question with more details, I am not sure how to reference the version that has been cached on the page, and is being displayed by the `` – iqueqiorio Nov 29 '15 at 09:20
  • Here you go: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded | Next time do a little research. It took me less than 5 secs to find it. – icecub Nov 29 '15 at 09:23
  • So with the updated question, can I assume that you have tried nothing whatsoever? – ggdx Nov 29 '15 at 09:25
  • @icecub that is not what I am trying to achieve, after the image has been input by the user I would like to it be clickable and when clicked go to a full screen of that image – iqueqiorio Nov 29 '15 at 09:25
  • @DanWhite Im really not sure how to access the cached version at all? – iqueqiorio Nov 29 '15 at 09:25
  • So make a javascript function that enlarges it to full screen? It's not like we want to be rude to you, seriously. But @DanWhite is right. We're not here to do your job for you. We're here if you have a specific issue with your code. Stack Overflow is a question and answer site **for professional and enthusiast programmers.** – icecub Nov 29 '15 at 09:28

1 Answers1

3

Try something like this in JavaScript:

var photofile = document.getElementById("photo_file");

photofile.onchange = function(){
    if (photofile.files && photofile.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var result = e.target.result;
            photofile.insertAdjacentHTML("afterend", "<a href='" + result + "' target='_blank'><img src='" + result + "' id='image_holder'/></a>");
        }

        reader.readAsDataURL(this.files[0]);
    }    
};

JSFiddle..

When an image is selected, this will show the image in an <img> tag, with a link that will open the image in a new tab when clicked.

Jacques Marais
  • 2,452
  • 12
  • 31