0

URL入力フォームに画像アドレス入力したらフォームの下に画像を表示する機能をHTMLとjQueryで実装したいのですが、ネットで調べても方法が分かりませんでした。
どなたか方法を教えていただけないでしょうか。

ネットで調べた結果、ローカルの画像ファイルをアップロードして表示する方法は見つけられましたが、外部の画像URLを入力する方法は見つけられませんでした。

ページの移動や再読み込み無しで実装したいです。

Javascriptによる方法は見つかりましたが、フェードイン・アウトなどの動きもたくさん付けたいため、また、コードをシンプルにしたいためjQueryを希望しています。

1 件の回答 1

1

URL入力フォームに画像アドレス入力したら

っというのはテキストボックスに、画像のURLを入力したらということで良いのでしょうか?
意図が違ったらご指摘ください

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("#selfile2").on("change", function(evt){
        console.log(this.value);
        $("#bg2").append("<img src='" + this.value + "'>");
      });
    });
  </script>
</head>
<body>
  <input type="text" id="selfile2"><br>
  <div id="bg2"></div>
</body>
</html>

下記で動作確認も可能です。
https://jsbin.com/cujetufuve/2/edit?html,console,output

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      $("#selfile2").on("change", function(evt) {
        console.log(this.value);
        $("#bg2").append("<img src='" + this.value + "'>");
      });
    });
  </script>
</head>

<body>
  <input type="text" id="selfile2"><br>
  <div id="bg2"></div>
</body>

</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。