みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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


<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>

投稿日時 - 2011-07-05 15:12:35

QNo.6855902

困ってます

質問者が選んだベストアンサー

>画像ファイルを一枚一枚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>

投稿日時 - 2011-07-06 18:29:34

お礼

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

投稿日時 - 2011-07-07 18:25:58

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

>CGIを使わずにできるか

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

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

投稿日時 - 2011-07-06 17:05:15

補足

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

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

やっぱりCGIでないと無理でしょうか。

投稿日時 - 2011-07-06 18:16:44

あなたにオススメの質問