画像URLがプロンプトに入力されているかどうかをチェックする方法 - JavaScript

Question

$(function() { 
     $(".upload").click(function() { 
      link = prompt("Paste a background image url"); 
      if (link == null) { 
      return; 
      } 
      else { 
      div = document.createElement('div'); 
      $(div).addClass("images").html('<img src="' + link + '">'); 
      $(".display").append(div); 
      } 
     }); 
    }); 

上記のコードは、入力した画像で新しいdivを作成するImage URLを入力するように私が現在使用しているコードです内に

ユーザーがテキスト（またはイメージのURLではありません何か）のビットを入力すると、画像タグを読んでいましたが、div要素がまだ作成されます：

どのようにかどうかをチェックしますユーザーは画像URLを入力しますか？

Answer 1

あなただけ行うことができます：

var extension = id.substr(link.length - 3); // get last 3 chars from the string 
if ((extension == "bmp") || (extension == "png") || ... you get the idea) { 
do right stuff 
else 
do wrong stuff 

しかし、あなたは

Answer 2

あなたが正規表現でリンクをチェックすることができ：これが唯一のファイルの拡張子をチェックします

(/\.(gif|jpg|jpeg|tiff|png)$/i).test(link)

しかし、あなたはまだ、選択したファイルが実際に存在するかどうかを確認することはできませんし、それが有効かどう画像ファイル。

「安全な」方法は、選択したファイルをサーバーにアップロードし、実際に画像ファイルであればpython/Java/PHP /で確認することです。

Answer 3

チェックし、また、いくつかのXSSを行うしようとすることができることを、リンクを表示する前に考慮して、その適切な配慮を取らなければなりませんイメージを読み込んで削除すると、エラーイベントが発生します。

// hook the event before you create any actual images (e.g. document ready) 
$(".display").on("error", "img", function() { 
    alert(this.src + " is not a valid image"); 
});