Загрузить изображение src в <img> с помощью jQuery.ajax

Question

На моем сайте я хотел бы предложить пользователям возможность указать URL-адрес изображения, а затем загрузить этот образ в подготовленный <img src=""> через AJAX.

Это форма, включая текстовое поле и кнопка отправки:

<form id="myform"> 
    <input name="image_url" type="text" placeholder="type your image URL" /> 
    <input type="submit" name="submit" id="submit" /> 
</form> 

и это будет <img> теги:

<img src="" id="image_from_url"> 

У меня уже есть это заявление JQuery, чтобы предотвратить по умолчанию кнопку отправки подача:

$(function() { 

    $('#myform').on('submit', function (e) { 

     e.preventDefault(); 

    // ajax call here? 

    }); 

    }); 

Может кто-нибудь дать подсказку о том, как я могу включить вызов ajax здесь, чтобы загрузить изображение (с URL-адреса изображения, которое пользователь предоставляет в текстовом поле формы), в <img src="">?

спасибо!

Answer 1

Вам не нужно Ajax для этого. Просто возьмите URL и создать новый образ элемента:

var i = null; 
$('#capture_form').on('submit', function (event) { 
    if (i) { 
     // update image if it already exists 
     i.prop('src', this.image_url.value); 
    } else { 
     // create <img>-element on the fly, as you might not need it beforehand 
     i = $('<img/>', { src: this.image_url.value }); 
     // append it as a child to another element 
     $('body').append(i); 
    } 

    event.preventDefault(); 
}); 

Demo

Try before buy

Answer 2

Try с этим:

var url = "Insert here the url"; 
$.get(url, function(data) { 
    $("#image_from_url").attr('src', data); 
}); 

Answer 3

Скажите, если я получил это неправильно, но я думаю, что вы просто хотите, чтобы загрузить изображение каждый раз, когда пользователь нажимает на кнопку отправки. Для этого, вы можете написать в коде кнопки отправки в

$(function() { 
    $('#capture_form').on('submit', function (e) { 
    $('#capture_section').removeClass("hidden"); 
    e.preventDefault(); 
    $('#image_from_url').attr({src: "<Image URL here>"}); 
    }); 
}); 

Answer 4

Просто сделать это:

http://jsfiddle.net/vmvuny9e/

$(function() { 
    $('#myform').on('submit', function (e) { 
     e.preventDefault(); 
     $("#image_from_url").attr("src", $("#image_url").val()); 
    }); 
}); 

Нет необходимости в какой-либоJAX, поскольку вы можете просто поместить URL-адрес изображения в атрибут <img> -tag src, и он будет работать безупречно.

Я добавил идентификатор на ваш вход, так как мне нужно было извлечь из него значение.