通过URL输入渲染/预览图像

Question

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

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.

Answer 1

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

Answer 2

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/