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

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

ただいまの
回答率

89.99%

Ajaxでアップロードした画像に削除フォームを付けるには

解決済

回答 1

投稿

  • 評価
  • クリップ 4
  • VIEW 2,841

schwarzewald

score 16

https://teratail.com/questions/1607
こちらの質問へのベストアンサーのソースに対して削除フォームを付けようとしているのですが、上手く動作しないで困っています。

方法としては、元のソースに加えて削除用のプログラムimg.delete.phpを作り、
if(file_exists($_POST['delFile'])){
    unlink($_POST['delFile']);
}

./imglist.phpのこの行の後に
echo "<img src='{$fl}' class='img_list' title='クリックして追加' />";
このようなフォームを追加して一度アップロードした画像一つ一つに削除ボタンを付けてクリックしたらその画像が削除されるようにしたいのですが、HTMLフォームの画面で出てきたボタンをクリックしたらimg.delete.phpに飛ばされてしまいます。
echo <<<EOM
<form id="imgForm" method="post" action="img.delete.php">
<input type="hidden" name="delFile" id="sendFile" value="{$fl}">
<input id="imgDelete" type="submit" value="削除">
</form>
EOM;

img.delete.phpに飛ばされた後にHTMLのフォームに戻ったら目的の画像は消えているのですが、画面遷移を起こさずに画面上の画像が消えるようにしたいです。

Ajaxで読み込んだhtmlのフォームに対してはadd.jsは効いていないのでしょうか?
こういう場合はどういう方法で実装するのが最良か、お知恵をお貸し頂ければ幸いです。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

・画面は遷移させたくない
・別プログラムで処理したい(ファイル削除)

という前提条件でよろしいでしょうか?
であれば、やはりAjaxを使うと良いと思います。

Jqueryのajaxメソッドを使うと、画面遷移することなく別プログラムに処理を依頼し、結果を受け取ることが出来ます。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

例です。


    // 送りたいパラメータを指定
    var param = {};
    param['delFile'] = $('#sendFile').val();
    param['imgDelete'] = 1;
    $.ajax({
      type:"POST",
      url:"img.delete.phpへのパス",
      data:param,
      success: function(rtn_str){
        //-- 通信が成功した時の処理をここに
        // rtn_strにはimg.delete.phpの出力が入ってきます。
        // img.delete.phpでファイル削除に成功したらecho 1;とかしておくと成否が解りやすいと思います。

          // 私なら成功時の処理メッセージをHTMLに埋め込みます。
          $(メッセージ表示エリアのセレクタ).text('ファイルを削除しました');
      }
    });

参加したばかりなので、勝手が解らず
読み取りにくいところがあるかもしれません。

お役に立てば幸いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/07/15 23:46

    すみません、こちらはどこに入れたらいいのでしょうか?
    add.jsの$(function(){}の中に入れても画面遷移してしまうのですが

    キャンセル

  • 2015/07/16 10:35

    HTMLのフォーム/submitボタンをそのまま利用されているからではないでしょうか?

    1.私が提示したロジックをメソッド化
    2.削除ボタンをクリックしたら作成したメソッドが実行されるように/フォームのsubmitは走らないように

    という風にする必要があります。
    すでに作成済みのadd.jsは別の話ですので、一度離れられた方が良いと思いますよ。
    ---
    いろんな方法があると思うのですが、以下に私のサンプルをざっくりと書いてみます。
    ※ 動作確認していないので誤りがあったらすみません。適宜ご修正ください。

    ○ ファイルを削除するフォーム / HTML(schwarzewaldさんがPHPで出力しているもの)
    submitはいけません。buttonでjavascriptをキックします。
    -------------
    echo <<<EOM

    ~ ファイルごとにループ>>
    <input type="button" onclick="javascript:delFIle({$fl});" value="削除">
    ~ <<ファイルごとにループ

    EOM;

    ○ ファイルを削除するボタンがあるHTML上に記載するJavascript / 要jquery
    ---
    function delFIle(del_file_id){
    var param = {};
    param['delFile'] = del_file_id;
    param['imgDelete'] = 1;
    $.ajax({
    type:"POST",
    url:"img.delete.phpへのパス",
    data:param,
    success: function(rtn_str){
    if(rtn_str==1){
    $('#mess_area_id').text('ファイルを削除しました');
    }else{
    $('#mess_area_id').text('削除に失敗しました');
    }
    }
    });
    }

    ○ ファイルを削除するPHP
    ----

    if(file_exists($_POST['delFile'])){
    if(unlink($_POST['delFile'])){
    echo 1;exit; // 削除成功
    }else{
    exit; // 削除失敗
    }
    }

    ----
    ご自身の環境に合わせて適宜ご修正ください。

    キャンセル

  • 2015/07/21 18:09 編集

    ありがとうございます。
    submitから$("#delFile").click(function(){}に変え、ボタンを
    <button type="button" id="delFile" value="{$fl}">削除</button> にしたところ画面遷移無しで上手く削除できました。

    キャンセル

  • 2015/07/21 21:25

    解決されたようで良かったです^^

    キャンセル

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

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