Как проверить, если 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 создаются с введенными изображениями в.

Если пользователь вводит немного текста (или что-то, что не является URL изображения), то ДИВ все равно будет создан, хотя тег изображения будет гласить:

Как проверить, если пользователь вводит 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 

Но, вы должны принять во внимание, прежде чем отображать ссылку, что это может быть также пытается сделать некоторые XSS, поэтому принять соответствующие соображения

Answer 2

Вы можете проверить связь с регулярным выражением:

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

Однако это будет только проверить расширение файла, вы можете по-прежнему не может быть уверен, что, если выбранный файл на самом деле существует, и если это действительный файл изображения.

Единственный «безопасный» способ - загрузить выбранный файл на ваш сервер и проверить с помощью python/Java/PHP/... если это фактически файл изображения.

Answer 3

Проверьте при загрузке изображения и удалении его:

// 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"); 
});