JavaScript 图像 URL 验证

我需要验证图像 url 以检查该 url 是否是以下任何扩展名的图像：- jpeg、jpg、gif、png。示例：- 当我们验证此 url 时http://www.example.com/asdf.jpg它应该给我们真正的价值和像这样的网址http://www.example.com/asdf.php应该返回 false。我们如何在 javascript 中做到这一点，而且我想检查 url 的内容类型。这样我们就可以判断 url 是否是图像。

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

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/

而且，由于现在是 Promise 的时代，因此这里有一个返回 Promise 的版本：

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/