Javascript 图像 URL 验证

Posted 2023-03-15

【中文标题】Javascript 图像 URL 验证

【英文标题】：Javascript Image Url Verify

【发布时间】：2012-03-31 15:41:25

【问题描述】：

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

【问题讨论】：

那么您想验证一个 in a string 的 url 是否以正确的扩展名结尾？那你还想看图片的内容吗？

@gideon 是的，我想要一个带有正确扩展名的字符串，但我不确定这是否可以，这就是为什么我要检查 url 的内容类型

这个问题是否包含 3 个部分，验证它是一个有效的 url？验证它是图像扩展名？验证图片内容？

如果 url 没有告诉我们文件类型怎么办？在这种情况下我们如何区分？

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

【讨论】：

感谢您的帮助。此功能有效，但我们如何检查 url 的内容类型。我的意思是第一步是检查 url 的扩展名，我想通过添加第二步来检查 url 的内容类型来使其更安全。

好吧，如果这个人输入了一个像example.com/asdf.php.jpg这样的php文件的url，那么我们如何返回false值，因为我们的函数将返回true。

@JohnPreston - 我添加了两种方法可以测试我的答案的 URL。第一，您将 URL 发送到服务器并让它测试内容类型。二、你可以运行一些代码将其加载到图像标签中，看看是否成功。

非常感谢。你真棒。你节省了我的时间。有用。再次感谢您的支持和时间。

对于那些寻求快速使用的人testImage(inputUrl, function(url, result) if (result === 'success') console.log(url), 10000);

【参考方案2】：

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

编辑：更新错字

【讨论】：

这两个都使用 jQuery 并且 OP 没有为 jQuery 标记问题。

这里有一个错字：lasIndexOf -> lastIndexOf

Ajax 解决方案很有趣，但在跨站点请求中不起作用，除非启用 CORS

请将$.ajax 修改为$.ajax()

【参考方案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);

【讨论】：

能否通过执行示例添加调用该方法的方式？

【参考方案4】：

用正则表达式验证图片 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);
  );

【参考方案5】：

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

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

【参考方案6】：

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

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