Render/ Preview Image from URL input

Question

I'm looking for a solution to render image before uploading via input URL.

enter image description here

My code

<input name="thumbnail" placeholder="Post image URL here" />

I've been trying methods like this. Adding onchange="readURL(this);" to above mentioned code does nothing. It appears they only work with local files only.

Do you also have an `` tag, like in [the answer](http://stackoverflow.com/a/4459419/2231440)? — Trojan, Dec 29 '13 at 00:10
Fully working snippet here: https://stackoverflow.com/a/56798296 — Aónio, Aug 29 '19 at 09:04

adeneo · Accepted Answer · 2013-12-29T00:11:48.810

4

use the value of the input as the source for an image tag. You can hide and show the image tag, create a new image each time, wait for the load event and show a spinner, use a default image, the possibilities are endless.

$('[name="thumbnail"]').on('change', function() {
     $('img.preview').prop('src', this.value);
});

FIDDLE

edited Dec 29 '13 at 00:11

answered Dec 29 '13 at 00:06

adeneo

312,895
29
395
388

Thanks, I tested it both at Chrome and Firefox. Its working smooth. – wp student Dec 29 '13 at 00:42

score 1 · Answer 2 · answered Dec 29 '13 at 00:09

You could use canvas.

var oCanvas = doc.getElementById('imgThumb'),
    oContext = oCanvas.getContext('2d');

oContext.drawImage(this, 0, 0, nWidth, nHeight);

Try out my fiddle http://jsfiddle.net/aliasm2k/tAum2/

Render/ Preview Image from URL input

2 Answers2