読者です 読者をやめる 読者になる 読者になる

修行@ホーチミン

ホーチミン長期出張の日記です

URL入力からリアルタイムで画像の確認

URLがどのような画像かチェックをするのが面倒だったので、入れた画像URLが存在する場合は勝手に表示する設定にしました。

かなり、小ネタですが..

HTML側

 

URL入力のtextBoxと、空のimgタグを好きなところに配置

<input type="text" class="form-control" name="imagePath" id="imagePath">
:
<img class="img-responsive" id="image" >

 

JS側

 

.keyupでテキスト内で何か入力があったりすると、イベント発火します。

.changeだとフォーカスが外れるまで、イベント発生しません。

読み込みができれば、imgタグにsrc属性追加します。

    $("#imagePath").keyup(function(){

        var newImage = new Image();
        newImage.onload = function() {
            $('#image').attr('src', $('#imagePath').val());
        }
        newImage.onerror = function() {
            $('#image').attr('src', "");
        }
        newImage.src = $('#imagePath').val();

    });

 

sample.html

 

実際にこれだけで、メモ帳にコピペして「.html」で保存したら確認ができます。

<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   </head>
    <body>
        <input type="text" size="60" id="imagePath">
        <br>
        <img id="image" >
        <script>
           $("#imagePath").keyup(function(){

               var newImage = new Image();
               newImage.src = $('#imagePath').val();
               
               newImage.onload = function() {
                   $('#image').attr('src', $('#imagePath').val());
               }
               newImage.onerror = function() {
                   $('#image').attr('src', "");
               }
           });
       </script>
    </body>
</html>

 

確認

 

スーパーシンプルなテキストボックスのみの画面

 

f:id:bebe0909:20160927204528p:plain

 

そのへんの適当な画像URLを入力すると

 

f:id:bebe0909:20160927204630p:plain

 

でてきました。

この方には、学生時代大変お世話になりました。