Question

我需要允许网络用户输入图片的网址，我希望用户能够直观地确认网址是否有效。

我希望如果用户输入：

没有，它将显示默认（未找到）图像。
http://example.com/ValidImageUrl.any_or_no_extension，它会接受并显示图片。
hxxp://example.com/ValidImageUrl.any_or_no_extension，它会显示默认（未找到）图片
http://example.com/INVALID_imageurl.any_or_no_extension，它将显示默认（未找到）图像。基本上，如果链接不是200，它应该显示默认
http://example.com/asdf?qwerty&t=10982741238947，（假设它有效）它将自动确定它是否是有效图像并在有效时显示它，否则显示默认（未找到）图像。这是最难捕获的案例，但在今天的flickr＆amp; amp; picassa嵌入式世界...但是如果浏览器可以将其检测为图像并显示它，那么javascript应该能够检测到它并识别其细节。

以下是一个极其简化的例子：

<input id="GivenUrl" onblur="UpdateImage()"/>
<img id="UserImage"/>

<script type="text/javascript">
  var TextBox =  document.getElementById("GivenUrl");
  var Image = document.getElementById("UserImage");
  if (Image.value == "")
  {
    UserImage.setAttribute("src", "MyDefaultImage.jpg");
  }else{
    UserImage.setAttribute("src", encodeURI(TextBox.value));
  }
</script>

最后我的约束：我最喜欢纯HTML / javascript的解决方案，所有这些都在客户端（用户）端进行处理。略微不太有利的解决方案将涉及.Net服务器端处理，这可能但绝对不是最佳的......

有什么想法吗？

请忽略上述任何良性编码错误，因为我目前不在机器上测试我自己的代码......

Answer 1

你很幸运：）

图片有一个onerror处理程序，所以你不必检查图像的有效性（即，url可能会尝试返回HTML而不是图像），你仍然可以掩盖你的背部。虽然我很确定处理程序可能不是W3C批准的。

<input id="GivenUrl" onblur="UpdateImage()"/>
<img id="UserImage" onerror="RollbackImage()"/>

<script type="text/javascript">
  var TextBox =  document.getElementById("GivenUrl");
  var Image = document.getElementById("UserImage");
  var OldUrl = Image.src;
  function UpdateImage(){
    OldUrl = Image.src;
    Image.src=TextBox.value;
  }
  function RollbackImage(){
    Image.src=OldUrl;
  }
</script>

Answer 2

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image URL Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#imageurl").blur(function() {
                if (($(this).val()).length > 0) {
                    var testimage = new Image();
                    testimage.onerror = function() {
                        $("#feedbackimage").attr("src", "http://www.professorperformance.com/public/images/university/no_image.gif");
                        $("#feedbackimage").show();
                    }
                    testimage.onload = function() {
                        $("#feedbackimage").attr("src", testimage.src);
                        $("#feedbackimage").show();
                    }
                    testimage.src = $(this).val();
                }
            });
        });
    </script>
</head>
<body>
    <form action="#">
        Image URL: <input type="text" name="imageurl" id="imageurl" value="" />
    </form>
    <img src="#" id="feedbackimage" style="display: none;" />
</body>
</html>

显示默认图像，除非URL是有效图像

2 个答案: