我需要验证图像 url，以检查该 url 是否是以下任何扩展名的图像：- jpeg、jpg、gif、png。示例：- 当我们验证这个 url http://www.example.com/asdf.jpg 时，它应该给我们真实的值，并且像这样的 url http://www.example.com/asdf.php 应该给我们真实的值返回假。我们如何在 javascript 中做到这一点，而且我想检查 url 的内容类型。这样我们就可以判断 url 是否是图像。
您可以使用这样的正则表达式来检查文件扩展名：
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/
使用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;
}
}
编辑：更新了拼写错误
使用正则表达式验证图像 URL 字符串，很简单。
url.match(/^https?:\/\/.+\/.+$/)
我们要检查的只是该 url 具有协议
https://foobar.com/pngjpg要检查图像是否存在，请将其 url 附加到 Image 构造函数并检查是否错误。
const doesImageExist = (url) =>
new Promise((resolve) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
});
更灵活的解决方案，支持文件扩展名后的查询参数：
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
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);
}
如果你想检查字符串是否以
httpurl.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null
这可能不是最佳方法，或者甚至可能不适用于您的用例。 但这肯定是最简单的，可以处理任何图像文件，它还可以检查该图像是否存在。
您需要做的就是制作一个带有 onerror 属性的隐藏图像元素（或使用事件处理程序）
<img hidden src="#" onerror="do_something()">
然后，当您想要验证图像时，只需更改图像的 src 属性，如果图像无效，将调用“onerror”事件，然后您可以使用该事件来处理另一个事件
这段代码运行给我并解决了我的问题
export async function isValidImageUrl(url) {
if (!url) {
return false;
}
const timeout = 5000;
const response = await fetch(url, {cache: 'no-store', timeout});
const contentType = response.headers.get('content-type');
return !!(contentType && contentType.includes('image'));
}