JavaScript客戶端檢查URL是否爲圖像

瀏覽器獲取外部URL列表，我想過濾那些圖像。JavaScript客戶端檢查URL是否爲圖像

這些網址位於其他域中，所以我認爲我只能使用JSONP dataType來完成此操作。

function checkImageURL(url){ 
    var isImage = false; 
    $.ajax({ 
     type : "GET", 
     dataType : "jsonp", 
     url : url, 
     success: function(data){ 
     console.log("Success was returned => a JSON file was returned"); 
     return false; 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      console.log(url); 
      console.log(jqXHR, textStatus, errorThrown); 
      if(jqXHR.status === 404){ 
       console.log('Is image'); 
       return true; 
      } 
      else if(jqXHR.status === 200){ 
       console.log('Not image'); 
       return false; 
      } 
      else{ 
       console.log("new status!",jqXHR.status); 
       return false; 
      } 
     } 
    }); 
} 

checkImageURL("https://en.wikipedia.org/404");//404 page 
checkImageURL("http://www.sheldonbrown.com/web_sample1.html");//HTML page 
checkImageURL("http://sites.duke.edu/jc319/files/2014/03/yellow-disney-pixar-cars-33967438-3507-2481.jpg");//Real image

jsfiddle

結果：

GET https://en.wikipedia.org/404?callback=jQuery21307281952630728483_1435482371527&_=1435482371528 404 (Not Found) 
https://en.wikipedia.org/404 
Object {readyState: 4, status: 404, statusText: "error"} "error" "error" 
Is image 

Uncaught SyntaxError: Unexpected token < 
http://www.sheldonbrown.com/web_sample1.html 
Object {readyState: 4, status: 200, statusText: "load"} ........ 
Not image 

Refused to execute script from 'http://sites.duke.edu/jc319/files/2014/03/yellow-disney-pixar-cars-33967438…2481.jpg?callback=jQuery21307281952630728483_1435482371531&_=1435482371532' because its MIME type ('image/jpeg') is not executable. 
http://sites.duke.edu/jc319/files/2014/03/yellow-disney-pixar-cars-33967438-3507-2481.jpg 
Object {readyState: 4, status: 404, statusText: "error"} "error" "error" 
Is image

我現在的問題是，一個404頁面與真實的圖像都返回相同的錯誤（404）。瀏覽器本身每個都會引發一個不同的錯誤，但顯然我無法抓住這些錯誤。

我現在被卡住了，所以要麼不可能做，要麼有完全不同的解決方案？

來源

2015-06-28 elbajo

請將dataType留空，因爲您不知道響應內容是什麼。請在您的ajax請求中將crossDomain設置爲true。

如果你得到一個成功響應仍然並不意味着響應圖像，以檢查內容類型：

success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || ""; 
    console.log((ct.indexOf('image') > -1) ? "is image" : "not image"); 
}

來源

2015-06-28 09:32:27 slash197

其實我覺得如果我獲得了成功，這意味着我得到了一個JSON文件（因爲我使用的是jsonp dataType）所以我應該只返回false。 – elbajo

@Bajo這是不正確的，看到我更新的答案 – slash197

我不確定我們是否使用相同的瀏覽器，但在鉻我仍然得到一個「」「否」訪問控制允許來源「標題出現在請求資源。Origin'http://fiddle.jshell.net'因此不允許訪問。如果我沒有將jsonp放入dataType中，則響應的HTTP狀態碼爲「404」：http://jsfiddle.net/h73chr5w /。 – elbajo

JavaScript客戶端檢查URL是否爲圖像

回答

相關問題