画像のURLを確認して、URLが次の拡張子のいずれかの画像であるかどうかを確認する必要があります：-jpeg、jpg、gif、png。例：-このURL http://www.example.com/asdf.jpgを確認すると、真の値が得られ、このようなURLではhttp://www.example.com/asdf.phpがfalseを返すはずです。javascriptでこれを行うにはどうすればよいですか？また、URLのコンテンツタイプを確認したいと思います。URLが画像であるかどうかを判断できるようにします。
87402 次
6 に答える
126
次のような正規表現を使用して、ファイル拡張子を確認できます。
function checkURL(url) {
return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}
これにより、URLがこれら4つの拡張子のいずれかで終了しているかどうかが確認されます。
Webページのドメイン外ではajaxを使用できないため、クライアントのjavascriptから、Webページと同じドメインにないURLのコンテンツタイプを確認する方法がわかりません。私が知っている限りでは、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と結果（ "success"、 "error"、または "timeout"）の2つの引数を使用して、将来的にコールバックを呼び出します。この作品はいくつかの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/
于 2012-03-15T06:23:14.900 に答える
8
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;
}
}
編集：更新されたタイプミス
于 2012-03-15T05:50:29.023 に答える
5
正規表現を使用して画像のURL文字列を検証する場合、これは簡単です。
url.match(/^https?:\/\/.+\/.+$/)
チェックしているのは、URLにプロトコルhttps://、ホスト名foobar.com、スラッシュ/、そして画像名が含まれていることだけです。画像拡張子（、 ...）は不要であり、ブラウザはヘッダーによって画像タイプをチェックするため、画像拡張子（png、 ...）をチェックする必要はありません。jpg
画像が存在するかどうかを確認するには、そのURLを画像コンストラクターに添付してエラーが発生していないかどうかを確認します。
const doesImageExist = (url) =>
new Promise((resolve) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
});
于 2021-07-11T04:18:37.033 に答える
4
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);
}
于 2020-03-13T20:36:45.640 に答える
3
より柔軟なソリューションで、ファイル拡張子の後のクエリパラメータをサポートします。
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
于 2021-02-11T22:01:41.633 に答える
1
文字列がで始まることを確認したい場合はhttp、
url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null
于 2020-08-02T20:10:10.017 に答える