Question

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

Answer 1

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

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

这会检查网址是否以这四个扩展名中的任何一个结尾。

我知道客户端无法通过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和结果（“成功”，“错误”或“超时”）。你可以在几个网址上看到这项工作，有些是好的，有些是坏的，在这里：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

使用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 3

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

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

Answer 5

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

url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null

Answer 6

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

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

我们检查的只是该 url 具有协议 https://、主机名 foobar.com、斜杠 / 和图像名称。无需检查图像扩展名 (png, jpg ...)，因为它不是必需的且 browsers check image type by it's headers。

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

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

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

Javascript图像网址验证

6 个答案: