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，尽管图像标记会显示：

如何查看用户是否输入了图片网址？

Answer 1

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

MacBook-Pro:local work$ gem list *** LOCAL GEMS *** archive-tar-minitar (0.5.2) bigdecimal (1.2.0) CFPropertyList (2.2.8) commander (4.4.0) httpclient (2.7.1) io-console (0.4.2) json (1.7.7) libxml-ruby (2.6.0) minitest (4.3.2) nokogiri (1.5.6) psych (2.0.0) rake (0.9.6) rdoc (4.0.0) rhc (1.38.4) sqlite3 (1.3.7) test-unit (2.0.0.0)

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

唯一的＆＃34;安全＆＃34;方法是将所选文件上传到您的服务器，并检查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

但是，在显示链接之前你必须考虑到它也可能正在尝试做一些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

3 个答案: