52939


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

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

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

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


CC BY-SA 4.0
2019-02-22T06:41:38.707
52937
2019-12-14T21:18:10.397
2019-02-22T06:46:53.133
29826
32275
question
javascript html jquery
URL入力フォームに画像アドレス入力したらフォームの下に画像を表示


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

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

[code]

    <!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>
    
[/code]

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

[code]

    <!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>
[/code]


CC BY-SA 4.0
2019-02-22T07:44:32.020
52939
2019-12-14T21:18:10.397
2019-12-14T21:18:10.397
32986
13022
52937
answer