前提・実現したいこと
PHP,HTML,css,javascriptを用いてる。
表示されている画像を選択して、選択された画像を保存するというのを作成しています。
test5.phpで画像を選択してダウンロードボタンをおします。imgdow.phpに選択された画像のURLを送信してそれをzipで保存していくという流れになっています。
発生している問題・エラーメッセージ
選択された画像のURLの取得自体はできているはずです。選択された画像のURLはJqueryを用いて画像のvalueから抽出して、それをjavascriptのurls[]に格納します。その後それをid ="button3"のvalueに代入します。しかしそれをPOSTでimgdow.phpに送信するとURLが1文字ずつに分割されて配列に代入されてしまうみたいです。分割されずにURLごとのまま送信をしたいです。
echoを用いて$iurlsにURLが代入されているか確認した所以下の様にhと表示されました。おそらくURLが1文字ごとに分割されて配列に格納されてしまっているみたいです。
echo $iurls; echo $iurls[0]; //以下結果 http://mmoloda-msgo.x0.com/image/63767.jpg,http://mmoloda-msgo.x0.com/image/63760.gif h
どこに問題があるのかわかりませんでした。
送信する前のurls[]には正しくURLごとに格納されているはずですが送信してしまうと1文字ごとに分割されて$iurlsに代入されてしまいます。
test5.php
<link rel="stylesheet" href="./style.css" /> <script type="text/javascript" src="./JSZIP3.1.2.js"></script> <script type="text/javascript" src="./JSZipUtils.js"></script> <script type="text/javascript" src="./FileSaver.js"></script> <script type="text/javascript" src="./jQuery1.11.1.js"></script> <form style="display: inline" method ="POST" action = "index.html" > <input type="submit" value="戻る"> </form> <form name ="input_form2" style="display: inline"id ="button2" action="imgdow.php" method="post"> <input type="submit" value="ダウンロード" /> <input type="hidden" id ="button3" name="hidden_input" value="" /> </form> <div id="main"> <ul class="image_list"> <li> <div class="image_box"> <img class="thumbnail" src="http://mmoloda-msgo.x0.com/image/63767.jpg" alt="foo" /> <input class="disabled_checkbox" type="checkbox" checked src="http://mmoloda-msgo.x0.com/image/63767.jpg"/> </div> </li> <li> <div class="image_box"> <img class="thumbnail" src="http://mmoloda-msgo.x0.com/image/63760.gif" alt="foo" /> <input class="disabled_checkbox" type="checkbox" checked src ="http://mmoloda-msgo.x0.com/image/63760.gif"/> </div> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="./base.js"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> var urls = []; $('#button2').on('click', function() { $('img.thumbnail.checked').each(function() { //値を取得 urls.push($(this).attr('src')); }); $('#button3').val(urls); alert($('#button3').val()); }); </script>
imgdow.php
<?php $iurls=$_POST["hidden_input"]; echo $iurls; echo $iurls[0]; /* $zip_name='img.zip'; $zip = new ZipArchive(); $res = $zip->open($zip_name, ZipArchive::CREATE); foreach($iurls as $value){ $imgname=rand(); $image_path =$value; $image = file_get_contents($image_path); file_put_contents($imgname, $image); $zip->addFile($imgname); } $zip->close(); if(ini_get('zlib.output_compression'))ini_set('zlib.output_compression', 'Off'); header('Content-Type: application/octet-stream;'); header('Content-Length: '.filesize($zip_name)); header('Content-Disposition: attachment; filename="'.$zip_name.'"'); mb_http_output("pass"); mb_output_handler("pass"); ob_end_clean(); readfile($zip_name); unlink($zip_name); */ ?>
###base.js
javascript
1$(function() { 2 // チェックボックスのクリックを無効化します。 3 $('.image_box .disabled_checkbox').click(function() { 4 return false; 5 }); 6 7 // 画像がクリックされた時の処理です。 8 $('img.thumbnail').on('click', function() { 9 if (!$(this).is('.checked')) { 10 // チェックが入っていない画像をクリックした場合、チェックを入れます。 11 $(this).addClass('checked'); 12 } else { 13 // チェックが入っている画像をクリックした場合、チェックを外します。 14 $(this).removeClass('checked') 15 } 16 }); 17 18}); 19 20 21
###style.css
css
1ul.image_list li { 2 /* liが横並びになるようにします。 */ 3 display: inline-block; 4} 5ul.image_list li .image_box { 6 7 width: 200px; 8 height: 200px; 9 10 /* チェックボックスの親要素にrelativeを指定しておきます。 */ 11 position: relative; 12} 13.image_box img.thumbnail { 14 15 width: 100%; 16 height: 100%; 17 18 /* 画像にカーソルを合わせたときに、 19 カーソルが指のマークになるようにします。 */ 20 cursor: pointer; 21} 22.image_box img.thumbnail.checked { 23 /* チェックが入った状態だと、枠が表示されるようにします。 */ 24 border: 6px solid blue; 25 /* 線をwidthとheightに含めるようにします。 */ 26 box-sizing: border-box; 27} 28.image_box .disabled_checkbox { 29 /* チェックボックスの位置は絶対位置にします。 */ 30 position: absolute; 31 /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */ 32 top: 12px; 33 right: 12px; 34 /* チェック前は非表示にしておきます。 */ 35 display: none; 36 /* チェックボックスを大きくします。 */ 37 transform: scale(2); 38 /* チェックボックスにカーソルを合わせたときに、 39 カーソルが指のマークになるようにします。 */ 40 cursor: pointer; 41} 42.image_box img.thumbnail.checked + .disabled_checkbox { 43 /* 画像にcheckedクラスが指定されたときは、 44 チェックボックスの非表示を解除します。 */ 45 display: block; 46}
試したこと
どこに問題があるのかわからず学生レベルだとお手上げです。
ただ単純に知識が薄いのでechoで$iurlsを確認すること以外はしていません。
補足情報(FW/ツールのバージョンなど)
phpver7.1.9
xampp 3.2.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/21 10:32
2018/10/21 10:40