如何检查图像 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);
          }
        });
    });

以上是我目前正在使用的代码，它要求用户输入一个图像 URL，其中使用输入的图像创建了一个新的 div。

如果用户输入了一些文本（或者不是图像的东西 URL），div 仍然会被创建，尽管图像标签会显示为：

如何检查用户是否输入了图像 URL？

Answer 1

您可以使用正则表达式检查 link：

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

但是，这只会检查文件扩展名，您仍然无法确定所选文件是否确实存在以及它是否是有效的图像文件。

唯一的 "safe" 方法是将所选文件上传到您的服务器并使用 python/Java/PHP/... 检查它是否确实是图像文件。

Answer 2

你可以这样做：

 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

但是，在显示 link 之前，您必须考虑到它也可能会尝试执行一些 XSS，因此请适当考虑

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

如何检查图像 URL 是否已输入提示 - JavaScript

How to check if an image URL has been inputted into a Prompt - JavaScript

javascript

url

jquery

image

prompt