回答編集履歴
2
画像選択UIのHTML/JavaScriptコードを追記
test
CHANGED
|
@@ -46,4 +46,142 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
+
(**2015/12/01 12:38追記**)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
> このようなかんじで画像の横にチェックボタンを置き、最後に『送信』ボタンを押すと押されたものをまとめて渡すようにしたいのですが。
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
次のように書きます(jsfiddleにサンプルUP済)。
|
|
58
|
+
|
|
59
|
+
- [画像リストをCSVフォーマットでサーバへ送信 - JSFiddle](http://jsfiddle.net/ejbnutvq/1/)
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
```HTML
|
|
64
|
+
|
|
65
|
+
<!-- sample.php に画像リスト(csv)を送信する -->
|
|
66
|
+
|
|
67
|
+
<form id="sample" method="GET" action="sample.php">
|
|
68
|
+
|
|
69
|
+
<ul>
|
|
70
|
+
|
|
71
|
+
<li>
|
|
72
|
+
|
|
73
|
+
<label>
|
|
74
|
+
|
|
75
|
+
<input type="checkbox" name="image[]" value="1.jpg" />
|
|
76
|
+
|
|
77
|
+
<img src="images/1.JPG" alt="img01" width="250" height="50" />
|
|
78
|
+
|
|
79
|
+
</label>
|
|
80
|
+
|
|
81
|
+
</li>
|
|
82
|
+
|
|
83
|
+
<li>
|
|
84
|
+
|
|
85
|
+
<label>
|
|
86
|
+
|
|
87
|
+
<input type="checkbox" name="image[]" value="2.jpg" />
|
|
88
|
+
|
|
89
|
+
<img src="images/2.JPG" alt="img02" width="250" height="50" />
|
|
90
|
+
|
|
91
|
+
</label>
|
|
92
|
+
|
|
93
|
+
</li>
|
|
94
|
+
|
|
95
|
+
</ul>
|
|
96
|
+
|
|
97
|
+
<p><input type="submit" value="submit"></p>
|
|
98
|
+
|
|
99
|
+
</form>
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
<script>
|
|
104
|
+
|
|
105
|
+
'use strict';
|
|
106
|
+
|
|
107
|
+
(function () {
|
|
108
|
+
|
|
109
|
+
function handleSubmit (event) {
|
|
110
|
+
|
|
111
|
+
var form = event.target,
|
|
112
|
+
|
|
113
|
+
inputs = form.elements['image[]'],
|
|
114
|
+
|
|
115
|
+
hidden = inputs[0].cloneNode(false),
|
|
116
|
+
|
|
117
|
+
imglist = [];
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
for (var i = 0, l = inputs.length, input; i < l; ++i) {
|
|
122
|
+
|
|
123
|
+
input = inputs[i];
|
|
124
|
+
|
|
125
|
+
if (input.checked) {
|
|
126
|
+
|
|
127
|
+
imglist.push(input.value);
|
|
128
|
+
|
|
129
|
+
input.disabled = true; // input[type=checkbox] の送信無効化
|
|
130
|
+
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
if (imglist.length > 0) {
|
|
138
|
+
|
|
139
|
+
hidden.type = 'hidden'; // input[type=chwckbox] の代替要素
|
|
140
|
+
|
|
141
|
+
hidden.value = imglist.join(); // "1.jpg,2.jpg” を代入(※画像ファイル名に " を含まない場合に限る。サーバサイドのCSVパーサが "," で区切って分割代入する仕様ならこの方法。RFC4180 準拠なら "" で各データセルを括る事。)
|
|
142
|
+
|
|
143
|
+
input.parentNode.insertBefore(hidden, input);
|
|
144
|
+
|
|
145
|
+
console.log(hidden);
|
|
146
|
+
|
|
147
|
+
} else {
|
|
148
|
+
|
|
149
|
+
console.log('no checked image');
|
|
150
|
+
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
event.preventDefault(); // 検証の為、submit をキャンセル (本番では外す)
|
|
156
|
+
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
function main () {
|
|
162
|
+
|
|
163
|
+
document.getElementById('sample').addEventListener('submit', handleSubmit, false); // 要 IE9+ (IE8- をサポートするなら attachEvent と併用)
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
main();
|
|
170
|
+
|
|
171
|
+
}());
|
|
172
|
+
|
|
173
|
+
</script>
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
ただし、この場合はサーバサイドスクリプトが側で `input[type=checkbox]` を受け取って処理するのが普通です。
|
|
180
|
+
|
|
181
|
+
送信前にわざわざ CSV フォーマットに変換しなくてもサーバ側で `image[]` のパラメータで選択した画像ファイル名を受け取れるわけですから CSV への変換コストが無駄になります。
|
|
182
|
+
|
|
183
|
+
サーバ側の仕様を変更できない事情があるなら仕方がないですが、このコードは非効率的な手段の為、サーバサイドスクリプト製作者と相談する事をお勧めします。
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
49
187
|
Re: Yuki_Tsutsumiさん
|
1
CSVファイルをアップロードする実装の可能性
test
CHANGED
|
@@ -38,4 +38,12 @@
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
+
**(2015/11/24 19:35追記)**
|
|
42
|
+
|
|
43
|
+
CSVファイルを使う用途としてCSVファイルをサーバにUPしてデータベースに入れる処理はよくありますが、ひょっとしてそういう可能性はないでしょうか。
|
|
44
|
+
|
|
45
|
+
だとすれば、`<input type="file">` でUPするだけの実装で済みますが。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
41
49
|
Re: Yuki_Tsutsumiさん
|