質問編集履歴
3
あげてはいけない画像をあげてしまったため
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
2
|
アップロードした画像を削除する機能を作っています。
|
|
3
3
|
画像はimgフォルダの画像が参照され画像の数だけチェックボックスと画像が表示されます。
|
|
4
|
-
チェックしたあとに削除ボタンを押すと画像が削除され、javascriptで更新するのですが、htmlのほうが更新されていない（？）状態
|
|
4
|
+
チェックしたあとに削除ボタンを押すと画像が削除され、javascriptで更新するのですが、htmlのほうが更新されていない（？）状態になります
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
5
|
#該当のソースコード
|
|
9
6
|
```html
|
|
10
7
|
<?php
|
2
javascriptの書き忘れ
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -54,4 +54,80 @@
|
|
|
54
54
|
|
|
55
55
|
</html>
|
|
56
56
|
|
|
57
|
+
```
|
|
58
|
+
```javascript
|
|
59
|
+
$(function(){
|
|
60
|
+
//フォームデータを一時保存する配列
|
|
61
|
+
var formDataArray = []
|
|
62
|
+
//クリックした時にデータ送信
|
|
63
|
+
$('#delete').on('click',function(){
|
|
64
|
+
//チェックボックス
|
|
65
|
+
var im = document.forms.fm.Checkbox;
|
|
66
|
+
var cnt = 0;
|
|
67
|
+
// Array オブジェクトを作成する
|
|
68
|
+
var img_id = new Array();
|
|
69
|
+
//チェックボックスの数だけ繰り返す
|
|
70
|
+
for(var i = 0; i < im.length; i++){
|
|
71
|
+
//チェックボックスにチェックがついてるか
|
|
72
|
+
console.log(im[i]);
|
|
73
|
+
console.log(im[i].checked);
|
|
74
|
+
if(im[i].checked){
|
|
75
|
+
//チェックボックスのvalue（imgのidが入っている）をimg_idにプッシュ
|
|
76
|
+
console.log(im[i].value);
|
|
77
|
+
img_id.push(im[i].value);
|
|
78
|
+
//チェックついてる数を数える
|
|
79
|
+
cnt++;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
//チェックついてる数だけ繰り返す
|
|
83
|
+
console.log(cnt);
|
|
84
|
+
for(var i = 0; i < cnt; i++){
|
|
85
|
+
var formData = new FormData();
|
|
86
|
+
console.log(img_id[i]);
|
|
87
|
+
var id = img_id[i];
|
|
88
|
+
console.log(document.getElementById(img_id[i]));
|
|
89
|
+
//チェックのついている画像のソースをformDataにappend
|
|
90
|
+
formData.append('path',document.getElementById(img_id[i]).getAttribute("src"));
|
|
91
|
+
//formDataをArrayにpush
|
|
92
|
+
formDataArray.push(formData);
|
|
93
|
+
}
|
|
94
|
+
//入ってる配列を繰り返す
|
|
95
|
+
formDataArray.forEach(function(formData){
|
|
96
|
+
//画像のsrcが入っているか確認
|
|
97
|
+
console.log(formData.get("path"));
|
|
98
|
+
//ajaxで送る
|
|
99
|
+
deleteFiles(formData);
|
|
100
|
+
});
|
|
101
|
+
location.reload(true);//更新する処理
|
|
102
|
+
});
|
|
103
|
+
var deleteFiles = function(formData){
|
|
104
|
+
//ajaxで送信
|
|
105
|
+
$.ajax({
|
|
106
|
+
//POSTで送信
|
|
107
|
+
type: 'POST',
|
|
108
|
+
//ajaxが適切なcontentTypeに自動変換するのを防ぐ
|
|
109
|
+
contentType: false,
|
|
110
|
+
//データを文字列に自動変換するのを防ぐ
|
|
111
|
+
processData: false,
|
|
112
|
+
//送信先
|
|
113
|
+
url: './delete.php',
|
|
114
|
+
//送るデータ
|
|
115
|
+
data: formData,
|
|
116
|
+
//通信成功時に呼ばれる
|
|
117
|
+
//data 接続先PHPファイルが出力したデータ
|
|
118
|
+
success: function(data,dataType) {
|
|
119
|
+
console.log("成功" +data);
|
|
120
|
+
},
|
|
121
|
+
//通信失敗時に呼ばれる
|
|
122
|
+
//XMLHttpRequest.status HTTPステータス
|
|
123
|
+
//textStatus timeout、error、parsererror等の文字列
|
|
124
|
+
//errorThrown 例外情報
|
|
125
|
+
error: function(XMLHttpRequest, textStatus, errorThrown){
|
|
126
|
+
console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
});
|
|
57
133
|
```
|
1
イメージ説明をつけた
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
画像はimgフォルダの画像が参照され画像の数だけチェックボックスと画像が表示されます。
|
|
4
4
|
チェックしたあとに削除ボタンを押すと画像が削除され、javascriptで更新するのですが、htmlのほうが更新されていない（？）状態(下記の画像の状態）になります。
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
8
|
#該当のソースコード
|
|
9
9
|
```html
|
|
10
10
|
<?php
|