Javascript图像urlvalidation

我需要validation一个图片的url来检查url是否是这些扩展名的图像： – jpeg，jpg，gif，png。 例如： – 当我们validation这个urlhttp://www.example.com/asdf.jpg它应该给我们真正的价值和像这样的urlhttp://www.example.com/asdf.php应该返回false。 我们怎么能做到这一点的JavaScript，我也想检查url的内容types。 所以我们可以说，url是否是一个图像。

Answer 1

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

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

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

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

但是，您可以通过使用如下函数来检查图片标签是否可以加载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); } 

这个函数将在以后的时间用两个参数调用你的callback函数：原始URL和一个结果（“success”，“error”或者“timeout”）。 你可以在几个URL上看到这个工作，一些很好，一些不好，在这里： http : //jsfiddle.net/jfriend00/qKtra/

---

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

 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请求方法检查内容types…

 $.ajax{ type: "HEAD", url : "urlValue", success: function(message,text,response){ if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){ alert("image"); } } } 

要检查string是否包含该扩展，可以使用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; } } 

编辑：更新错字