顯示默認圖片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服務器端處理，這是可能的，但絕對不是最佳...

任何想法？

請在上面忽略任何良性的編碼錯誤，因爲我不是目前在一臺機器，我可以測試自己的代碼...

來源

2010-12-21 Dekker500

你多幸福:)

圖像有一個的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>

來源

2010-12-21 17:13:39 Christian

完美！這就是訣竅！而且作爲附錄，這是完全合法的HTML5（參見：http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects） – Dekker500 2010-12-21 17:34:33

試試這個：

<!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>

來源

2010-12-21 17:33:07 user386748

顯示默認圖片URL，除非是一個有效的圖像

回答

相關問題