Question

我正在尝试将图像加载到从文本框中获取的URL中的div标签。我当前的文件如下所示。我不知道还有什么要做

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <div class="ImageContainer">
          image will appear here:  
        </div>
    </body>
</html>

Answer 1

使用纯JavaScript可以加载图像，如下所示。我正在使用onChange事件来检测url是否已提供给文本框。按Enter键，图像将加载到div中。

＆＃13;

function addImage()
{
  var url = document.getElementsByClassName("imageURL1")[0].value;
  var image = new Image();
  image.src = url;
  document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}

＆＃13;

<html lang="en">
  <head>
  </head>
  <body>
    <input type="text" class="imageURL1" onChange="addImage();">
    <div class="ImageContainer">
      image will appear here:  
    </div>
  </body>
</html>

＆＃13;

Answer 2

你可以尝试这样的事情。

＆＃13;

$(document).ready(function(){
    $("#Submit").click(function(){
        var image_url = $(".imageURL1").val();
        $(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
          
</div>

＆＃13;

Js小提琴示例 - ＆gt; http://jsfiddle.net/0kvxpnmv/

Answer 3

$('<img src="'+image_url+'">').load(function() {
  $(this).appendTo('.ImageContainer');
});

<强> JS Fiddle

Answer 4

如何使用按钮调用一个功能，该功能将在文本框中使用url更改图像src

<强> HTML

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <button onclick="func()">Load image</button>
        <div class="ImageContainer">
          <img src="" id="imgContainer">
        </div>
    </body>
</html>

<强>的javascript

(function(){
var func = function(){
 var url = $(".imageURL1").val()
 $('#imgContainer').attr('src',url)
}

})();

这是jsFiddle with jQuery和without jQuery

Answer 5

使用php

index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>

现在，当他们点击提交时，它将带您进入新页面

GetURL.php

$image_url = $_REQUEST['url'];

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <div class="ImageContainer">
          <?php echo '<img src="{$image}"/>'; ?>
        </div>
    </body>
</html>

在此页面上，您可以在imageContainer class中看到您的图片网址已发布PHP

从这里处理此问题的最佳方法是将表单与图像放在同一页面上，并使用ajax发布url。

因此，您可以在文本框中输入网址，完成后会刷新图片网址。

Answer 6

请参阅下面的代码，在文本输入的更改事件中，它将创建一个jQuery img标记，然后添加然后使用输入中的URL作为源并清除输出div的内容。加载图像后，它将替换输出div的内容。

$('.imageURL1').change(function() {
    var $img = $('<img/>');
    $img.attr('src', $(this).val());
    $img.load(function() {
        $('.ImageContainer').html(this);
    });
});

此解决方案需要jQuery。

工作小提琴here。

从文本框中获取的URL中加载DIV中的图像

6 个答案: