Как просмотреть изображение, переданное по ссылке, перед тем как оно будет отправлено?

Question

У меня есть поле ввода HTML, как показано ниже, в котором я хочу просмотреть изображение, переданное по ссылке, перед его отправкой.Вот для этого скрипка .Я хочу, чтобы после размещения URL-адреса изображения в поле ввода оно отображалось в разделе заполнителя Powered by HTML.COM.

Вот что я пробовал:

HTML:

<input type='link' onchange="readURL(this);" />
<img id="blah" src="http://placehold.it/180" alt="your image" />

JavaScript:

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

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result);
            };

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

Постановка задачи:

Приведенный выше HTML / JS работает отлично, когда input type ='file'.Мне интересно, какие изменения я должен внести в скрипт выше, чтобы он работал, когда input type ='link'