ファイルがjQueryまたは純粋なJavaScriptに存在するかどうかを確認するにはどうすればよいですか？

サーバー上のファイルがjQueryまたは純粋なJavaScriptに存在するかどうかを確認するにはどうすればよいですか？

jQueryの場合：

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

編集：

jQueryを使用せずに404ステータスをチェックするためのコードは次のとおりです

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

小さな変更で、代わりにステータスHTTPステータスコード200（成功）をチェックできました。

編集2：sync XMLHttpRequestは非推奨であるため、次のようなユーティリティメソッドを追加して非同期にすることができます。

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

同様の、より最新のアプローチ。

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })

これは私にとってはうまくいきます：

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

このスクリプトを使用して代替画像を追加しました

function imgError()
{
alert('The image could not be loaded.');
}

HTML：

<img src="image.gif" onerror="imgError()" />

http://wap.w3schools.com/jsref/event_onerror.asp

同じドメインでファイルをテストしている限り、これは機能するはずです。

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

この例はGETリクエストを使用していることに注意してください。ヘッダーを取得する以外に（ファイルが存在するかどうかを確認するために必要なすべての）ファイル全体を取得します。ファイルが十分に大きい場合、このメソッドは完了するまでに時間がかかることがあります。

これを行うには良い方法は、この行を変更することになります。req.open('GET', url, false);にreq.open('HEAD', url, false);

この質問への回答を実行しようとすると、クロスドメインのアクセス許可の問題が発生したため、次のようにしました。

function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
    return true;
}).bind('error', function() {
    return false;
});
}

それは素晴らしいようです、これが誰かを助けることを願っています！

ES7の方法で行う方法は次のとおりです。BabelトランスパイラーまたはTypescript 2を使用している場合：

async function isUrlFound(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',
      cache: 'no-cache'
    });

    return response.status === 200;

  } catch(error) {
    // console.log(error);
    return false;
  }
}

次に、他のasyncスコープ内で、URLが存在するかどうかを簡単に確認できます。

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');

console.log(isValidUrl); // true || false

このスクリプトを使用して、ファイルが存在するかどうかを確認します（クロスオリジンの問題も処理します）。

$.ajax(url, {
       method: 'GET',
       dataType: 'jsonp'
         })
   .done(function(response) { 
        // exists code 
    }).fail(function(response) { 
        // doesnt exist
    })

チェック対象のファイルにJSONが含まれていない場合、次の構文エラーがスローされることに注意してください。

キャッチされないSyntaxError：予期しないトークン<

サーバーからの応答を待つことによってユーザーエクスペリエンスが低下することはないため、ファイルが存在するかどうかを確認する非同期呼び出しの方が優れています。あなたがへの呼び出しにする場合.open（例えば、上記の多くの例のようにfalseに三番目のパラメータが設定されたがhttp.open('HEAD', url, false);）、これは同期呼び出しで、あなたは、ブラウザのコンソールに警告を取得します。

より良いアプローチは：

function fetchStatus( address ) {
  var client = new XMLHttpRequest();
  client.onload = function() {
    // in case of network errors this might not give reliable results
    returnStatus( this.status );
  }
  client.open( "HEAD", address, true );
  client.send();
}

function returnStatus( status ) {
  if ( status === 200 ) {
    console.log( 'file exists!' );
  }
  else {
    console.log( 'file does not exist! status: ' + status );
  }
}

ソース：https : //xhr.spec.whatwg.org/

クライアントコンピュータの場合、これは次の方法で実現できます。

try
{
  var myObject, f;
  myObject = new ActiveXObject("Scripting.FileSystemObject");
  f =   myObject.GetFile("C:\\img.txt");
  f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
  alert("file does not exist")
}

これは、特定の場所にファイルを転送するための私のプログラムであり、存在しない場合は警告を表示します

ファイルが存在するかどうかを確認するJavaScript関数：

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

最初に関数を作成します

$.UrlExists = function(url) {
	var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

以下のように機能を使用した後

if($.UrlExists("urlimg")){
	foto = "img1.jpg";
}else{
	foto = "img2.jpg";
}

$('<img>').attr('src',foto);

これは受け入れられた回答への適応ですが、私は回答から必要なものを得ることができず、これが直感的に機能するかどうかをテストする必要があったので、ここに解決策を置きます。

ローカルファイルが存在することを確認し、存在する場合にのみファイル（PDF）を開くことを許可する必要がありました。ウェブサイトのURLを省略した場合、ブラウザは自動的にホスト名を決定します-localhostとサーバーで機能します：

$.ajax({

    url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
    type: 'HEAD',
    error: function () {
        //file not exists
        alert('PDF does not exist');

    },
    success: function () {
        //file exists
        window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");

    }
});

あなたがしなければならないのは、サーバーがチェックを行うようにリクエストを送信し、その結果をあなたに送り返すことです。

どのタイプのサーバーと通信しようとしていますか？リクエストに応答するために小さなサービスを書く必要があるかもしれません。

これはOPの質問には対応していませんが、データベースから結果を返すすべての人のためにあります。これが私が使用した簡単な方法です。

ユーザーがアバターをアップロードしなかった場合、avatarフィールドはになるNULLので、imgディレクトリからデフォルトのアバター画像を挿入します。

function getAvatar(avatar) {
    if(avatar == null) {
        return '/img/avatar.jpg';
    } else {
        return '/avi/' + avatar;
    }
}

その後

<img src="' + getAvatar(data.user.avatar) + '" alt="">

それは私のために働きます、ブラウザを無視するためにiframeを使用してGETエラーメッセージを表示します

 var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
 if ($(imgFrame).find('img').attr('width') > 0) {
     // do something
 } else {
     // do something
 }

ブール値を返す関数が必要でしたが、クロージャと非同期性に関連する問題が発生しました。私はこのように解決しました：

checkFileExistence= function (file){
    result=false;
    jQuery.ajaxSetup({async:false});
    $.get(file)
        .done(function() {
           result=true;
        })
        .fail(function() {
           result=false;
        })
    jQuery.ajaxSetup({async:true});
    return(result);
},