Отображать изображение по умолчанию, если URL не является допустимым изображением - PullRequest
Новая
       4

Отображать изображение по умолчанию, если URL не является допустимым изображением

0 голосов
/ 21 декабря 2010

Мне нужно разрешить веб-пользователю вводить URL-адрес изображения, и я хочу, чтобы у пользователя было визуальное подтверждение того, что URL действителен (или нет).

Мне бы хотелось, чтобы, если пользователь вводит:

  • ничего, будет отображаться изображение по умолчанию (не найдено).
  • 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 & 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, которая возможна, но определенно не оптимальна ...

Есть идеи?

Пожалуйста, не обращайте внимания на любые ошибки кодирования, описанные выше, поскольку в данный момент я не нахожусь на машине, где я могу проверить свой собственный код ...

Ответы [ 2 ]

0 голосов
/ 21 декабря 2010

Попробуйте это: 

<!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>
0 голосов
/ 21 декабря 2010

Вам повезло:)

Изображения имеют обработчик ошибки, поэтому вам не нужно проверять действительность изображения (т. Е. 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...