質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.06%

  • JavaScript

    13299questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    927questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

ajaxでファイルが存在するかを確かめたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 303

dounatsu

score 4

ajaxを使ってファイルの存在確認をしたいと思っています。
ボタンがクリックされた時にフォルダの有無を確認し、そのフォルダが存在すれば、中の画像ファイルを表示するというコードを作りたいと考えています。
画像ファイルが存在すれば、htmlにコードを追加し、画像を全て挿入するまでループさせる構造にしているのですが、下記の変数checkがずっとtrueのままなのでループが終わりません。

調べるとクロージャーが関係している様なので、色々試してみたのですがどうも上手くいかないのでご教授ください。
他の方法があることは分かっているのですが、ajaxを使った方法でコードを完成させたいので、よろしくお願い致します。

$("#btn").on('click', function() {

            $.ajax({
                url: 'image',
                type: 'GET',
                error: function() {
                    //not exists
                    alert('Images do not exist. y');
                },
                success: function() {
                    // exists
                   var check = true;
                   var i = 1;
                    while (check==true && i<5) { //i<5は無限ループ対策
                        (function(check,i){
                            $.get('image/' + 'image' + i + '.jpg')
                                  .done(function() { 
                          // the image exists.
                                    $("#images").append("HTML内の指定場所にimgタグ追加");
                                    check = true;
                                    return check;

                              }).fail(function() { 
                             // the image doesn't exist.
                                    check = false;
                                    return check;


                                 })
                                 alert(check);
                                 return check;
                        })(check,i);
                        i++;
                    }
                }
            });

        });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/12/09 15:21

    どこにあるファイルですか? クライアントの PC にあるフォルダ / ファイルだとすると、それを JavaScript で探すのは基本的にできませんが?

    キャンセル

  • dounatsu

    2017/12/09 16:02

    情報不足で申し訳ありません。サーバーにアップロードしたファイルです。自分の環境ではcloud9を使っており、相対パスで指定しています。(cloud9上で絶対パスの指定方法が分からなかったので。)また、簡単なテストコードでファイルの存在は確認できました。

    キャンセル

回答 1

checkベストアンサー

+2

戻り値を受けるcheckがないので常にtrueですね。

check = (function(check,i){

そもそもの問題なのですが、dounatsuさんのコードに違和感を覚えます。
ajaxで200が返ってきたら連番で画像を取得するのは、単に二度手間なのでは?
ajaxの戻り値で画像のファイル名を送ってあげる方がスマートでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/09 17:39

    ご回答ありがとうございます。
    これはfunction(check, i)で始まる即時関数を変数checkに代入する様にすれば良いということでしょうか。
    これを試したのですが、while文の最後(i++の後)でcheckの値を確認したらずっとtrueでした。(テストファイルだと画像は3枚なので、i=4でfalseになってほしい)
    また、二度手間というのは一回フォルダの存在を確認した後に中のファイルの存在を確認していることでしょうか。そうであれば本来のコードでは、フォルダ自体がたくさんあるので、一度フォルダの存在自体を確認する目的で作りました。そうでなければ、仰っている意味が理解できなかったので詳しくご教授いただけると幸いです。

    キャンセル

  • 2017/12/09 22:50

    > これはfunction(check, i)で始まる即時関数を変数checkに代入する様にすれば良いということでしょうか。

    そうです。
    無名関数の中で使われるcheckは外のスコープのcheckとは別物です。
    なので無名関数にchekを渡す必要もありません。

    > while文の最後(i++の後)でcheckの値を確認したらずっとtrueでした。

    すみません、ちゃんとdounatsuさんのコードを読んでいませんでした。
    $.getは非同期なのでコールバックを取る前にwhile loopが回ってます。
    今のままのコードではwhileの条件にcheckを使えませんね。

    > フォルダ自体がたくさんあるので、一度フォルダの存在自体を確認する目的で作りました。

    最初のajaxでファルダの存在確認とフォルダ下の画像ファイルのリストをjsonで返してあげればいいんです。
    サーバ側のプログラムに何を使っているか知りませんが、それほど難しくないはずです。

    二度手間というか三度手間です。
    まず$.ajaxと$.get、次に$.getでの画像取得とimgタグをappendして同じ画像を取得と。

    キャンセル

  • 2017/12/10 04:34

    確かに最初のajaxで全て回せばコードが大分スッキリしますね。ちょっと頭が硬くなっていました。

    結局のところ非同期のファンクションとループは相性があまりよくないのですね。(相性が良くないというか、少なくともコールバックのタイミングやらスコープなどをしっかり理解していないと活用するのは難しそう)

    いずれにせよ目標としていたことは達成できそうです。ありがとうございました。

    キャンセル

  • 2017/12/10 23:15

    > 非同期のファンクションとループは相性があまりよくないのですね。

    ん?
    dounatsuさんのコードからすると、そういう返答は出ないはずなんですが・・・。
    非同期のファンクションがどういうものか理解していて、即時関数と無名関数がわかっているのなら、あのコードは絶対に書きません。

    最近いろんなところでteratailのよくない噂を耳にしています。
    私の思い違いならいいのですが・・・。

    キャンセル

  • 2018/01/11 05:02

    回答だいぶ遅くなって大変申し訳ありません。
    最近teratailを使っていなくて全く気付きませんでした。

    よくない噂と言うものが何かは分かりませんが、相性云々のコメントは単純に理解していないと上手く使いこなせないといった意図で特に深い意味はありませんでした。
    混乱させるような表現で申し訳ありません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13299questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    927questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。