JavaScript 客户端检查 URL 是否为图像

Question

浏览器获取外部 URL 列表，我想过滤掉图片。

URL 在其他域上，所以我想我只能使用 JSONP 来做到这一点数据类型。

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)。浏览器本身会为每个错误抛出不同的错误，但显然我无法捕捉到这些错误。

我现在有点卡住了，所以要么无法做到，要么有完全不同的解决方案？

Answer 1

将 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");
}