添加图像URL表单 - 使用AJAX预览图像

Question

我一直试图找出如何做到这一点。

我唯一能找到的是上传图片然后AJAX预览上传的图片。

如何为图片网址执行相同操作？

即。用户提交图像URL，然后AJAX提供图像预览。

如果还有其他方法可以使用其他技术，JQuery，HTML5也可以。 ：）

---

更新：

为了清楚说明，我指的是输入类型=“文本”而不​​是输入类型=“文件”

Answer 1

要根据输入到文本输入中的网址显示图片，请将网址用作图片代码的来源，如下所示：

<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

Answer 2

使用html5，您可以获取上传的文件数据，然后将其写为图像或画布的src属性。请参阅：Get Base64 encode file-data from Input Form