51

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

4

6 回答 6

126

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

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 的时代，这里有一个返回 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/

于 2012-03-15T06:23:14.900 回答
8

使用 HEAD http 请求方法检查内容类型...

$.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;
  }
}

编辑：更新错字

于 2012-03-15T05:50:29.023 回答
5

要使用正则表达式验证图像 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);
  });
于 2021-07-11T04:18:37.033 回答
4 
let url = "folder/myImage.png";
if ( isValidImageURL(url) ){
    // do something if url is valid image url.
}

function isValidImageURL(str){
    if ( typeof str !== 'string' ) return false;
    return !!str.match(/\w+\.(jpg|jpeg|gif|png|tiff|bmp)$/gi);
}
于 2020-03-13T20:36:45.640 回答
3

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

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
于 2021-02-11T22:01:41.633 回答
1

如果要检查字符串是否以开头，http可以使用

url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null
于 2020-08-02T20:10:10.017 回答