質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,483

natsu9993

score 10

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

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

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

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

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

よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2015/11/24 19:19

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

    キャンセル

  • natsu9993

    2015/11/24 19:23

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

    キャンセル

回答 3

checkベストアンサー

+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さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/28 17:57

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

    キャンセル

  • 2015/11/28 23:29

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

    キャンセル

  • 2015/11/30 01:00

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

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

    キャンセル

  • 2015/12/01 12:39

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/24 19:08 編集

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

    キャンセル

  • 2015/11/24 19:17

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

    キャンセル

  • 2015/11/24 19:26

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

    キャンセル

0

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"]); //チェックされたファイルパスが配列で受け取れる
//以下、適当な処理

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/24 19:17

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる