Javascript图像网址验证

Question

我需要验证图片网址以检查网址是否是这些扩展程序的图片: - jpeg,jpg,gif,png.示例: - 当我们验证此URL http://www.example.com/asdf.jpg时,它应该给我们真正的价值,并且像这样的url http://www.example.com/asdf.php应该返回false.我们如何在javascript中执行此操作,并且还要检查URL的内容类型.这样我们就可以说网址是否是图像.

Answer 1

您可以使用这样的正则表达式来检查文件扩展名:

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

这将检查url是否以这四个扩展中的任何一个结束.

我知道客户端无法通过javascript来验证与网页不在同一域中的URL的内容类型,因为您无法在网页域外使用ajax.据我所知,您必须将URL发送到服务器进程并让它下载映像,获取内容类型并将其返回给您.

但是,您可以使用如下函数检查图像标记是否可以加载URL:

function testImage(url, callback, timeout) {
    timeout = timeout || 5000;
    var timedOut = false, timer;
    var img = new Image();
    img.onerror = img.onabort = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "error");
        }
    };
    img.onload = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "success");
        }
    };
    img.src = url;
    timer = setTimeout(function() {
        timedOut = true;
        // reset .src to invalid URL so it stops previous
        // loading, but doesn't trigger new load
        img.src = "//!!!!/test.jpg";
        callback(url, "timeout");
    }, timeout); 
}

此函数将在以后使用两个参数调用您的回调:原始URL和结果("成功","错误"或"超时").你可以在几个URL上看到这个工作,有些好,有些不好,这里:http://jsfiddle.net/jfriend00/qKtra/

而且,既然现在是Promises的时代,这里有一个返回承诺的版本:

function testImage(url, timeoutT) {
    return new Promise(function (resolve, reject) {
        var timeout = timeoutT || 5000;
        var timer, img = new Image();
        img.onerror = img.onabort = function () {
            clearTimeout(timer);
            reject("error");
        };
        img.onload = function () {
            clearTimeout(timer);
            resolve("success");
        };
        timer = setTimeout(function () {
            // reset .src to invalid URL so it stops previous
            // loading, but doesn't trigger new load
            img.src = "//!!!!/test.jpg";
            reject("timeout");
        }, timeout);
        img.src = url;
    });
}

并且,一个jsFiddle演示:http://jsfiddle.net/jfriend00/vhtzghkd/

Answer 2

使用正则表达式验证图像 url 字符串很简单。

url.match(/^https?:\/\/.+\/.+$/)

我们要检查的只是 url 是否包含协议https://、主机名foobar.com、斜杠/以及图像名称。无需检查图像扩展名（png，jpg...），因为它不是必需的，并且浏览器通过其标题检查图像类型。

要检查图像是否存在，请将其 url 附加到 Image 构造函数并检查是否错误。

const doesImageExist = (url) =>
  new Promise((resolve) => {
    const img = new Image();

    img.src = url;
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
  });

Answer 3

使用HEAD http请求方法检查contenttype ...

$.ajax({
  type: "HEAD",
  url : "urlValue",
  success: function(message,text,response){
     if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){
           alert("image");
    }
  } 
});

要检查字符串是否包含可以使用inArray方法的扩展,

function checkUrl(url){
   var arr = [ "jpeg", "jpg", "gif", "png" ];
   var ext = url.substring(url.lastIndexOf(".")+1);
   if($.inArray(ext,arr)){
     alert("valid url");
     return true;
  }
}

编辑:更新错字

Answer 4

更灵活的解决方案，支持文件扩展名后的查询参数：

function isImgLink(url) {
    if(typeof url !== 'string') return false;
    return(url.match(/^http[^\?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi) != null);
}

console.log(isImgLink('https://example.com/img.jpg')); // true
console.log(isImgLink('https://example.com/any-route?param=not-img-file.jpg')); // false
console.log(isImgLink('https://example.com/img.jpg?param=123')); // true