Javascript图片网址验证 [英] Javascript Image Url Verify

问题描述

我需要验证图片网址以检查网址是否为以下任一扩展名的图片： - jpeg，jpg，gif，png。例如： - 当我们验证此网址 http://www.example.com/asdf.jpg 时，它应该给我们提供真实性值和像这样的 http://www.example.com/asdf.php 应该返回false。我们如何在JavaScript中做到这一点，也想检查url的内容类型。因此，我们可以说url是否为图片。

解决方案

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

 函数checkURL（url）{
 return（url.match（/ \。（jpeg | jpg | gif | png）$ /）！= null）; 
} 
  

检查url是否以这四个扩展名中的任何一个结尾。 / p>

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

但是，你可以检查一下图片标签是否可以使用像这样的函数来加载URL：

  function testImage（url，回调，超时）{
 timeout = timeout || 5000; 
 var timedOut = false，timer; 
 var img = new Image（）; 
 img.onerror = img.onabort = function（）{
 if（！timedOut）{
 clearTimeout（timer）; 
回调（url，error）; 
} 
}; 
 img.onload = function（）{
 if（！timedOut）{
 clearTimeout（timer）; 
回调（url，success）; 
} 
}; 
 img.src = url; 
 timer = setTimeout（function（）{
 timedOut = true; 
 //将.src复位为无效的URL，以便停止前面的
 //加载，但不会触发新的load 
 img.src =//!!!!/test.jpg; 
 callback（url，timeout）; 
}，timeout）; 
} 
  

这个函数将在以后的某个时间用两个参数调用你的回调函数：网址和结果（成功，错误或超时）。您可以在以下几个网址看到这项工作，其中一些很好，一些不好： http://jsfiddle.net/jfriend00/qKtra/

---

而且，由于现在是Promise的时代，所以这是一个返回承诺的版本：

 函数testImage（url，timeoutT）{
返回新的Promise（函数（解析，拒绝）{
 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（）{
 //将.src复位为无效的URL，以便停止前面的
 //加载，但不会触发新的加载
 img.src =//!!!!/test.jpg; 
 reje CT（ 超时）; 
}，超时）; 
 img.src = url; 
}）; 
} 
  

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

I need to verify an image url to check whether the url is an image of any of these extensions:- jpeg, jpg, gif, png. Example:- when we verify this url http://www.example.com/asdf.jpg it should give us true value and with url like this http://www.example.com/asdf.php should return false. How can we do this in javascript and also i want to check the content type of url. So that we can say whether the url is an image or not.

解决方案

You can use a regular expression like this to check the file extension:

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

This checks to see if the url ends in any of those four extensions.

I know of no way from javascript in the client to verify the content-type of a URL that isn't on the same domain as the web page because you can't use ajax outside of the domain of the web page. As best I know, you'd have to ship the URL to a server process and have it download the image, get the content type and return that to you.

But, you can check to see if an image tag can load the URL by using a function like this:

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

This function will call your callback at some future time with two arguments: the original URL and a result ("success", "error" or "timeout"). You can see this work on several URLs, some good and some bad, here: http://jsfiddle.net/jfriend00/qKtra/

---

And, since this is now the era of Promises, here's a version that returns a 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;
    });
}

And, a jsFiddle demo: http://jsfiddle.net/jfriend00/vhtzghkd/

这篇关于Javascript图片网址验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！