チェックボックスで指定したものをダウンロード

質問

JavaScriptの初心者です。
画像一枚毎にチェックボックスを作って、チェックした画像がダウンロードボタンをクリックすると保存されるようなＨＰを作りたいのですが、いろいろ調べているのですがどのようにすればよいのか見当がつきません。どうかご存じの方よろしくお願いします。

イメージは、フォトギャラリーのサムネイル画像の下にチェックボックスがあってチェックした画像のみダウンロードするという感じです。

ＣＧＩを使わずにできるかどうかも合わせてご教示いただけたらと思います。

<FORM NAME="form1">
<INPUT TYPE="checkbox" VALUE="1"> 画像(1)
<INPUT TYPE="checkbox" VALUE="2"> 画像(2)
<INPUT TYPE="checkbox" VALUE="3"> 画像(3)
<INPUT TYPE="checkbox" VALUE="4"> 画像(4)
<INPUT TYPE="checkbox" VALUE="5"> 画像(5)<BR>
<INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="ダウンロード">
</FORM>

回答No.2

yambejp · ベストアンサー

>画像ファイルを一枚一枚zip形式にして

なるほど、でしたら以下でいけるかも。
ただ、ブラウザやユーザーの環境によっては誤動作の可能性があるので
ユーザーには注意を喚起してください
（ユーザビリティのためlabelを設定してありますがなくてもよいです）

<script>
function download(f){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].checked){
var n=window.open(f[i].value);
}
}
}
</script>
<form>
<input type="checkbox" value="1.zip" id="img_1"><label for="img_1"><img src="1.jpg"></label>
<input type="checkbox" value="2.zip" id="img_2"><label for="img_2"><img src="2.jpg"></label>
<input type="checkbox" value="3.zip" id="img_3"><label for="img_3"><img src="3.jpg"></label>
<input type="button" value="download" onclick="download(this.form)">
</form>

お礼

使用したいページで問題なく使用できました。そして大変勉強になりました。
もう少し長いプログラムがあって複雑になるのかなと思っていましたが、思っていたよりシンプルで
希望通り動作したので心より感謝しております。
有難うございます。

回答No.1

yambejp

>ＣＧＩを使わずにできるか

httpヘッダーを利用するのが一番現実的です
そうなると非常にCGI（.htaccess含む）などサーバー側の処理がないと
難しいと思った方がよいでしょう。

また複数チェックした時にダウンロードする方法はどうするつもりですか？
複数のダウンロードダイアログを出すのは意外にめんどうです。
アーカイブして１つのファイルで落とす方がよいでしょう。
そうなると組合せの問題がありますのでほぼCGI処理が前提になります。

補足

ご回答有難うございます。
実は、ＣＧＩが使えないサーバであることとサーバを変えてもＣＧＩの知識が全くないのでできれば、ＣＧＩを使わない方法でやりたいと思っています。

複数チェックした時のダウンロードはその都度、ダイアログが表示されても問題ないです。
画像ファイルを一枚一枚zip形式にしてダウンロードできるようにしたいと考えています。

やっぱりＣＧＩでないと無理でしょうか。