0

I've been trying to find out how to do this.

The only thing I have been able to find is uploading an image and then AJAX previewing the uploaded image.

How can I do the same for image url?

i.e. The user submits an image url and then AJAX gives a preview of the image.

If there's another way to do this with other technologies, JQuery, HTML5 that is fine too. :)

UPDATE:

To make this clear, I am referring to a input type="text" NOT a input type="file"

JoseBazBaz
  • 1,445
  • 4
  • 14
  • 23
  • try this link: [Preview an image before upload](http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/114822/preview-an-image-before-upload#) – Rahul Dec 21 '12 at 07:45
  • ^I am talking about image URLs - not image submissions. There are lots of image submission examples on the web just not image URLs thanks anyways. – JoseBazBaz Dec 21 '12 at 07:49
  • I have no idea what you are trying to do, but is it something like [**THIS FIDDLE**](http://jsfiddle.net/adeneo/pBXGe/) ??? – adeneo Dec 21 '12 at 08:28
  • Sorry this is my first web app so I am new to all this Javascript stuff - I thought it would be a lot more complicated than it actually was - lol – JoseBazBaz Dec 21 '12 at 08:45

2 Answers2

3

To show an image based on an URL typed into a text input, take the url and use it as the source for an image tag, like so:

<input type="text" id="url"/>  <!--text input-->
<input type="button" id="btn" value="show image" /> <!--button to get the image-->
<img src="" id="img">​ <!--image tag to show the image-->

JS:

$('#btn').on('click', function() {           //on click of button
    $('#img').attr('src', $('#url').val());  //get the input value and 
});​                                          //set it as the source attribute

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • I get an Uncaught Syntax Error: Token is illegal – JoseBazBaz Dec 21 '12 at 09:10
  • Did you just copy the code from the fiddle, and if so, there is a bug that adds some invisible characters to the code sometimes, so try copying the code from here instead, or write it yourself, it's only a few lines. – adeneo Dec 21 '12 at 09:13
  • Ok. I tried to integrate it to my html document - I have included the code above - is there anything that I am doing wrong - p.s. just letting you know I will definitely choose you as the correct answer once this small bug is sorted out. – JoseBazBaz Dec 21 '12 at 09:15
  • @JoseBazBaz - It's hard to tell what the error is, but the console will tell you exactly where to find the character(s) that are messing up. Check that you added jQuery properly, and make sure the code inside document.ready function etc. – adeneo Dec 21 '12 at 09:18
  • It has an issue with the last line: }); – JoseBazBaz Dec 21 '12 at 09:22
  • On JSFiddle, when I run JSLint, it says the code is valid - although it still doesn't work. I will try and deintegrate it and use your exact code as much as possible to see if that works. – JoseBazBaz Dec 21 '12 at 09:24
  • As mentioned earlier, when doing copy/paste from jsfiddle, sometimes it will add some characters at the end of the code, so just delete the last line and rewrite it by hand, as it's almost certainly the problem. – adeneo Dec 21 '12 at 09:28
  • Yeah, that worked I had to rewrite the last line by hand and then your code worked! Now I am going to integrate it back to my code! – JoseBazBaz Dec 21 '12 at 09:33
  • It worked!!!!!! LOL - I had to rewrite the last line consisting of 3 characters and that did the trick - I have successfully integrated it. Here, have a chocolate chip cookie for your good efforts! – JoseBazBaz Dec 21 '12 at 09:36
  • Thank you! It's some weird bug in jsFiddle, struggled with it myself several times. – adeneo Dec 21 '12 at 10:16
0

With html5 you can get uploaded file data and then write it as src attribute of the image or canvas. See this: Get Base64 encode file-data from Input Form

Community
  • 1
  • 1
karaxuna
  • 26,752
  • 13
  • 82
  • 117