23

重複の可能性：
jqueryを使用して、指定されたURLで画像が存在するかどうかを確認し
ますファイルが存在する場合は画像ソースを変更します

テキストボックスからboxvalueに画像パスの値をスローしていて、JavaScriptを使用して画像が存在するかどうかを検証したいと思います。 

 var boxvalue = $('#UrlQueueBox').val();

私はstackoverflowを閲覧し、画像の幅/高さを取得するために以下を見つけましたが、これを使用したくありません。

var img = document.getElementById('imageid');

それが本当に画像パスからの画像であるかどうかをどのように検証できますか？

4

2 に答える 2

73 
// The "callback" argument is called with either true or false
// depending on whether the image at "url" exists or not.
function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() { callback(true); };
  img.onerror = function() { callback(false); };
  img.src = url;
}

// Sample usage
var imageUrl = 'http://www.google.com/images/srpr/nav_logo14.png';
imageExists(imageUrl, function(exists) {
  console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
});
于 2013-02-01T17:40:13.870 に答える
6

関数を作成してcompleteプロパティを確認できます。

function ImageExists(selector) {
    var imageFound = $(selector); 

    if (!imageFound.get(0).complete) {
        return false;
    }
    else if (imageFound.height() === 0) {
        return false;
    }

    return true;
}

この関数を呼び出します

 var exists = ImageExists('#UrlQueueBox');

パラメーターとしてセレクターの代わりにURLを使用する同じ関数（あなたの場合）：

function imageExists(url){

    var image = new Image();

    image.src = url;

    if (!image.complete) {
        return false;
    }
    else if (image.height === 0) {
        return false;
    }

    return true;
}
于 2013-02-01T17:06:06.650 に答える