複数チェックした画像を削除する機能

###前提・実現したいこと
Webサイトで画像の一覧を見れたり、削除やダウンロードができるシステムを作っています
チェックボックスで複数チェックしたあとに削除ボタンを押すとチェックされた画像だけ削除されるようにajaxで画像のソース（画像がある場所例：./img/201705059932.png）を送って削除（unlink()）するというのを作りたいのですが、どのようにチェックボックスを数えてそこからチェックされたものだけ数えてそのチェックされたものの画像のソースを取得できるかわかりません。delete.php以降の処理はできています。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5<script type="text/javascript" src="jquery.min.js"></script>
6<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
7<script type="text/javascript" src="jquery-ui.min.js"></script>
8<link rel="stylesheet" href="./css/stylesheet.css">
9<title>画像一覧画面（テスト）</title>
10<script type="text/javascript" src="fileDelete.js"></script>
11</head>
12
13<body>
14<form action="" id="fm">
15  <input id="Checkbox" type="checkbox"/><label for="Checkbox1"><img alt="" id="hanakishi1" src="./img/201705132127302158.bmp"></label><br />
16  <input id="Checkbox" type="checkbox"/><label for="Checkbox2"><img alt="" id="hanakishi2" src="./img/201705132128064424.bmp"></label><br />
17  <input id="Checkbox" type="checkbox"/><label for="Checkbox2"><img alt="" id="hanakishi3" src="./img/201705132202537738.bmp"></label><br />
18  <input id="Checkbox" type="checkbox"/><label for="Checkbox2"><img alt="" id="hanakishi4" src="./img/201705132202538089.bmp"></label><br />
19  <input id="Checkbox" type="checkbox"/><label for="Checkbox2"><img alt="" id="hanakishi5" src="./img/201705132202538861.bmp"></label><br />
20  <input id=Delete type="button" value="削除" />
21</form> 
22</body>
23
24</html>
25

###該当のソースコード

javascript
1$(function(){
2    //フォームデータを一時保存する配列
3    var formDataArray = []
4    //クリックした時にデータ送信
5    $('#delete').on('click',function(){
6        //チェックボックスの数を代入（画像の数はアップロードされた数だけなのでいくつあるかわからない）
7        var ? = ?
8        //チェックボックスの数だけ繰り返す
9        for(){
10            //チェックされているかを確認しそれを代入
11            var ? = ?
12        }
13        //チェックされた数だけ繰り返す
14        for(){
15            //FormData作成
16            var formData = FormData();
17            //チェックされた画像のソースをformDataに入れる
18            formData.append('select',チェックされた画像のソース);
19            //フォームデータをフォームデータ一時保存配列に保持
20            formDataArray.push(formData);
21        }
22        //削除したい画像の数だけajaxでdelete.phpに送る
23        formDataArray.forEach(function(formData){
24            deleteFiles(formData);           
25        });
26    });
27    var deleteFiles = function(formData){
28        //ajaxで送信
29        $.ajax({
30            //POSTで送信
31            type: 'POST',
32            //ajaxが適切なcontentTypeに自動変換するのを防ぐ
33            contentType: false,
34            //データを文字列に自動変換するのを防ぐ
35            processData: false,
36            //送信先
37            url: './delete.php',
38            //送るデータ
39            data: formData,
40            //通信成功時に呼ばれる
41            //data 接続先PHPファイルが出力したデータ
42            success: function(data,dataType) {
43                console.log("成功" +data);
44            },
45            //通信失敗時に呼ばれる
46            //XMLHttpRequest.status HTTPステータス
47            //textStatus            timeout、error、parsererror等の文字列
48            //errorThrown           例外情報
49            error: function(XMLHttpRequest, textStatus, errorThrown){
50                console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
51            }
52        });
53
54    }
55
56});

kei344

2017/05/20 15:50

「チェックされた画像のソース」とは何を想定されていますか？

rms398

2017/05/21 11:03

画像のソースをunlinkで削除することです。

kei344

2017/05/21 11:35

画像のURLということでしょうか？

rms398

2017/05/21 11:40

画像がある場所ということです ./img/201705059932.png　←これです

行動規範の内容に同意します

回答2件

ベストアンサー

概要だけ
inputの属性に画像の情報を持たせる(value=画像id でもなんでも)
id=fmの子要素のinputを抽出してループで回す
type属性がcheckboxのinput要素はcheck属性も持っているので、それを調べチェック済みのinputの画像情報を抽出する。

投稿2017/05/20 16:34

hirohiro

総合スコア2068

rms398

2017/05/21 11:19

document.forms.fm.checkbox.valueで画像のidを取得して var id = document.forms.fm.checkbox.value; var src = document.forms.fm.id.src;で画像のソースを取得するといったところですかね？

hirohiro

2017/05/21 12:38

jQueryを使ってるようですので、id=fmのform以下のinputの一覧は色々な方法で取得可能だと思います。例えば　「HTML」 <form id="fm"> <input type="checkbox" imgsrc="aa.jpg"> <input type="checkbox" imgsrc="bb.jpg"> </form> 「js」 $('#fm').children('input').each(function(){console.log($(this).attr('imgsrc'));}); //aa.jpg //bb.jpg こんな感じです。提示されたHTMLの<image>から情報が得たい場合は少し面倒ですが、eachの中でinputの次にくるimageのような形で特定可能だったと思います

hirohiro

2017/05/21 12:42 編集

↑だと全てのinputのimgsrcを参照していますが、チェックのあるものだけのような指定をしたりif文で仕分ければよいと思います。 http://d.hatena.ne.jp/replication/20130613/1371137959

行動規範の内容に同意します

checkboxを利用してajaxでimgのsrcを渡すのであればこんな感じでしょうか？

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('input[type=checkbox][name="del[]"]').each(function(){
5    var val=$(this).next().filter('img').attr('src');
6    if(val) $(this).val(val);
7  });
8  $('input[type=button][value=del]').on('click',function(){
9    if($('input[type=checkbox][name="del[]"]:checked').length>0){
10      var fd=new FormData($(this).closest('form').get(0));
11      $.ajax({
12      url:"delete.php",
13      data:fd,
14      processData: false,
15      contentType: false,
16      type:"post",
17      success:function(data){
18        console.log(data);/*削除結果を使ってformを書き直す必要あり*/
19      },
20      });
21    }
22  });
23});
24</script>
25<form>
26<input type="checkbox" name="del[]"><img src="img1.jpg"><br>
27<input type="checkbox" name="del[]"><img src="img2.jpg"><br>
28<input type="checkbox" name="del[]"><img src="img3.jpg"><br>
29<input type="button" value="del">
30</form>