Javascript 图像 URL 验证 [英] Javascript Image Url Verify
问题描述
我需要验证图像 url 以检查该 url 是否是以下任何扩展名的图像:- jpeg、jpg、gif、png.示例:- 当我们验证此 url http://www.example.com/asdf.jpg 时,它应该给我们 true值和像这样的 url http://www.example.com/asdf.php 应该返回 false.我们如何在 javascript 中执行此操作,而且我想检查 url 的内容类型.这样我们就可以判断url是否是图片.
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.
我不知道客户端中的 javascript 无法验证与网页不在同一域中的 URL 的内容类型,因为您不能在网页域之外使用 ajax.据我所知,您必须将 URL 发送到服务器进程并让它下载图像、获取内容类型并将其返回给您.
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.
但是,您可以使用如下函数检查图像标签是否可以加载 URL:
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);
}
此函数将在未来某个时间调用您的回调,并带有两个参数:原始 URL 和结果(成功"、错误"或超时").你可以在几个 URL 上看到这项工作,有好有坏,在这里:http://jsfiddle.net/jfriend00/qKtra/一个>
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/
而且,由于现在是 Promises 的时代,这里有一个返回 Promise 的版本:
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;
});
}
还有一个 jsFiddle 演示:http://jsfiddle.net/jfriend00/vhtzghkd/
And, a jsFiddle demo: http://jsfiddle.net/jfriend00/vhtzghkd/
这篇关于Javascript 图像 URL 验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!