csvをサーバへリクエストする方法

Question

はじめまして皆さんのお力をお借りしたいです

いま、あるwebページを作っています
サーバーサイドとフロントエンドで別々の担当者が
作成していて、僕の担当はフロントサイドです

そこで
webページで表紙している画像を
何点か利用者に選んでもらい
その画像のファイル名を
カンマ区切りで渡してあげる必要があるのですが
どのようにやればよいのかまったくわかりません
（画像の横にチェックボタンを作成し、押された画像のパスを
サーバーサイドに渡そうと思い作成しています）

どのようなものを用いて行えば
実現が可能でしょうか？

素人なので詳細まで教えていただければ
大変助かります

よろしくお願いします。

Comments

[think49]

タイトルは「csvファイルをローカルに保存する方法」ですが、本文は「csvをサーバへリクエストする方法」に読めます。
後者の質問と判断しますが、良かったでしょうか。タイトルを分かりやすいものにしていただけると助かります。

[natsu9993]

ありがとうございます　タイトルの方変更させて頂きました。

Answer 1

csv形式でサーバーサイドに渡してあげる必要があるのですが、どのようにやればよいのかまったくわかりません

下記情報が必要になります。

• サーバ側にどのようなパラメータで渡すのか
• CSVフォーマットでどのセルに画像パスを格納するのか

とりあえず、RFC4180でCSVが定義されていますので目を通してください。

• CSVファイルの一般的書式 (RFC4180 日本語訳) - アルプス登山の玄関口・笠井家

仮に「1行のカンマ区切りで画像ファイルパスを格納する」としてCSVフォーマットは次のように書けるでしょう。

'use strict';
var imgpaths = ['http://example.com/sample1.jpg', 'http://example.com/sample2.jpg', 'http://example.com/sample3.jpg']
var csv = imgpaths.map(function (value) { return '"' + value.replace(/"/g, '""') + '"'; }).join();
console.log(csv); // "http://example.com/sample1.jpg","http://example.com/sample2.jpg","http://example.com/sample3.jpg"

サーバへのリクエストに関しては <form> で送信するか、XMLHttpRequest で送信するか、を目的に合わせて選んでください。

(2015/11/24 19:35追記)
CSVファイルを使う用途としてCSVファイルをサーバにUPしてデータベースに入れる処理はよくありますが、ひょっとしてそういう可能性はないでしょうか。
だとすれば、<input type="file"> でUPするだけの実装で済みますが。

(2015/12/01 12:38追記)

このようなかんじで画像の横にチェックボタンを置き、最後に『送信』ボタンを押すと押されたものをまとめて渡すようにしたいのですが。

次のように書きます(jsfiddleにサンプルUP済)。

• 画像リストをCSVフォーマットでサーバへ送信 - JSFiddle

<!-- sample.php に画像リスト(csv)を送信する -->
<form id="sample" method="GET" action="sample.php">
  <ul>
    <li>
      <label>
        <input type="checkbox" name="image[]" value="1.jpg" />
        <img src="images/1.JPG" alt="img01" width="250" height="50" />
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="image[]" value="2.jpg" />
        <img src="images/2.JPG" alt="img02" width="250" height="50" />
      </label>
    </li>
  </ul>
  <p><input type="submit" value="submit"></p>
</form>

<script>
'use strict';
(function () {
  function handleSubmit (event) {
    var form = event.target,
        inputs = form.elements['image[]'],
        hidden = inputs[0].cloneNode(false),
        imglist = [];

    for (var i = 0, l = inputs.length, input; i < l; ++i) {
      input = inputs[i];
      if (input.checked) {
        imglist.push(input.value);
        input.disabled = true;  // input[type=checkbox] の送信無効化
      }
    }

    if (imglist.length > 0) {
      hidden.type = 'hidden'; // input[type=chwckbox] の代替要素
      hidden.value = imglist.join(); // "1.jpg,2.jpg” を代入(※画像ファイル名に " を含まない場合に限る。サーバサイドのCSVパーサが "," で区切って分割代入する仕様ならこの方法。RFC4180 準拠なら "" で各データセルを括る事。)
      input.parentNode.insertBefore(hidden, input);
      console.log(hidden);
    } else {
      console.log('no checked image');
    }

    event.preventDefault(); // 検証の為、submit をキャンセル (本番では外す)
  }

  function main () {
    document.getElementById('sample').addEventListener('submit', handleSubmit, false);  // 要 IE9+ (IE8- をサポートするなら attachEvent と併用)
  }

  main();
}());
</script>

ただし、この場合はサーバサイドスクリプトが側で input[type=checkbox] を受け取って処理するのが普通です。
送信前にわざわざ CSV フォーマットに変換しなくてもサーバ側で image[] のパラメータで選択した画像ファイル名を受け取れるわけですから CSV への変換コストが無駄になります。
サーバ側の仕様を変更できない事情があるなら仕方がないですが、このコードは非効率的な手段の為、サーバサイドスクリプト製作者と相談する事をお勧めします。

Re: Yuki_Tsutsumiさん

Comments

[natsu9993]

要は選択した画像のファイル名をコンマ区切りで投げれたらいいみたいです。

[think49]

画像を選択する方法によって実装が変わりますが、親コメントのように画像リストが配列化できたとして imgpaths.join() で期待通りの結果が得られると思います。
ただし、ファイル名に ["\r\n] を含まないものとします。
サーバ側で解析(パース)すると思われる「CSVのフォーマット仕様」も気になるところですね。

[natsu9993]

<li>
<input type="checkbox" name="checkbox" id="checkbox">
<img src="images/1 (1).JPG" alt="img01" width="250"/>
</li>
<li>
<input type="checkbox" name="checkbox" id="checkbox">

<img src="images/1 (2).JPG" alt="img02" width="250"/>
</li>

このようなかんじで画像の横にチェックボタンを置き、最後に『送信』ボタンを押すと押されたものをまとめて渡すようにしたいのですが。

[think49]

親コメントに追記しました。
親コメントでも書きましたが、CSVへの変換処理が不要な気がします。「サーバ側で input[type=checkbox] で選択したパラメータを受け取る仕様に出来ない理由」があるのでしょうか。

Answer 2

フロントとサーバでどういう作業の分け方をしているんですか？
おそらくデータを画面から選択してもらってサーバに値を処理させるのであれば、選択したデータを取得するのもサーバ側の処理で実行するので、フロント側は渡すところまで考えなくて良いのではないかと思いました。

Comments

[natsu9993]

選択した画像をサーバーサイドで加工してDLさせるのが最終目標です　サーバー側(Ruby on Rails)で加工をする画像のパスをcsv形式で投げてほしいと言われたのですがフロント側での実装は難しいでしょうか？

[matsumoto]

選択した画像をまとめて送るのであれば、ユーザに選択させた複数の画像を、csvにして渡すことになります。渡すところまではjavascriptでできます。フレームワークでangularjs,jqueryなど覚えるといろいろ簡単に出来ます。

[natsu9993]

ありがとうございます　jqueryは一度調べてみたのですがangularjsは初めて聞きました。　一度調べてみます

Answer 3

CSV形式というのはカンマ区切りということですか？
それともファイルの形にして送信するのでしょうか？
単にファイルパスの一覧を送るだけなら

送る側

<form name="check.php" method="post">
<input type="checkbox" name="filepath[]" value="ファイルパス1">ファイルパス1
<input type="checkbox" name="filepath[]" value="ファイルパス2">ファイルパス2
<input type="submit" value="送信">
</form>

$filepath = $_POST["filepath"]); //チェックされたファイルパスが配列で受け取れる
//以下、適当な処理

みたいな感じで簡単なのですが・・

Comments

[natsu9993]

相手がRailsで実装しているのでですがRailsでも似たような書き方で可能でしょうか？