web-dev-qa-db-ja.com

ファイルがjQueryまたは純粋なJavaScriptに存在するかどうかをどうやって確認するのですか？

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

javascriptjqueryfile-io
250
usertest

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（成功）のステータスを確認できます。

418
cichy

類似した、より最新のアプローチ。

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })
66
Matthew James Davis

これは私のために働く：

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

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

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

HTML：

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

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

42
Gino

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

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);に変更することです。

19
Moob

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

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

うまくいくようです、これが誰かに役立つことを願っています！

15
Shaun

Babel transpilerまたはTypeScript 2を使用している場合は、ES7でこれを実行する方法は次のとおりです。

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
5
Nik Sumeiko

私はこのスクリプトを使ってファイルが存在するかどうかをチェックします（それはクロスOrigin問題を処理します）：

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

チェック対象のファイルにJSONが含まれていない場合は、次の構文エラーがスローされます。

捕捉されなかったSyntaxError：予期しないトークン<

3
Gëzim Musliaj

ファイルが存在するかどうかをチェックする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;
    }
}
2
Ani Menon

ファイルが存在するかどうかを確認するための非同期呼び出しは、サーバーからの応答を待つことによってユーザーエクスペリエンスを低下させることがないため、より良い方法です。 3番目のパラメータをfalseに設定して.openを呼び出すと（上の例のように、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/

2
Jim Bergman

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

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")
}

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

1
yasir amin 9th-b DR.VSMPS

最初に関数を作成します

$.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);
1
Vladimir Salguero

これは受け入れられた答えへの適応ですが、私は答えから私が必要とするものを得ることができませんでした、そしてそれが巧妙だったのでこれをうまく働かせなければなりませんでした。

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

$.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");

    }
});
1
Josh Harris

それは私のために動作します、ブラウザが無視GETエラーメッセージを無視するためにiframeを使用

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

ブール値を返す関数が欲しいのですが、クロージャと非同期性に関連した問題に遭遇しました。私はこのようにして解決しました：

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);
},
0
Gianlorenzo Lenza

これは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="">
0
timgavin

あなたがしなければならないのはそれがチェックをするためにサーバに要求を送ってそれからあなたに結果を送り返すことです。

どのような種類のサーバーと通信しようとしていますか？あなたは要求に応えるために小さなサービスを書く必要があるかもしれません。

0
MadcapLaugher