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

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

ただいまの
回答率

91.02%

  • PHP

    17769questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13825questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5819questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3386questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ajax

    958questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

input type=fileのfile名をsubmitした先のコントローラーで受け取りたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 329

oguramk5

score 28

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style media="screen">
      li{
        list-style: none;
      }
    </style>
    <script type="text/javascript">
    $(function(){
      var $fileList = $('#file_list');
      $fileList
        //削除がクリックされた場合の処理
        .on('click.deleteFile', '.delete_btn', function(){
          var $li = $(this).closest('.each_file');
          $li.remove();
          //inputタグ数が4つ未満になった場合に再度表示させる処理
          var $fileListLI = $('#file_list li input[name=img_file]');
          var inputFileNum = $fileListLI.length;
          //最後のinputタグを表示する処理
          var lastInputFile = $fileListLI.eq(-1);
          if (inputFileNum < 4){
            $(lastInputFile).show();
          }
          return false;
        })

      $fileList
        //inputタグに画像が追加された場合の処理
        .on('change.inputFile', '.input_file', function(e){
          var $input = $(this),
              $li    = $input.closest('.each_file'),
              $newLi = $li.clone();
              $fileList.append($newLi);
          //サムネイル画像を表示する処理
          var file = e.target.files[0],
              fileName = file.name;
        //FileReaderオブジェクトの生成
              reader = new FileReader();
              reader.readAsDataURL(file);

              reader.onloadend = function(){
                var fileReader = this;
                if(fileReader.result){
                  var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>';
                  $li.append(thumb);
                }
                return this;
              };
          $input.hide();

          //画像が3つになった場合にinputタグを非表示にする処理
          //上にも同じコードがあるのでまとめた方がいいのですが...
          var $fileListLI = $('#file_list li input[name=img_file]');
          var inputFileNum = $fileListLI.length;
          var lastInputFile = $fileListLI.eq(-1);
          if (inputFileNum == 4){
            $(lastInputFile).hide();
          }

          //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理
          var fd = new FormData();
     //最後から2番目のinputタグを拾う処理
     //画像が選択されるinputタグは必ず最後から2番目
          var targetFile = $fileListLI.eq(-2);
     //1画像毎のUPなので[0]、複数である場合は[1][2]...
          fd.append( "file", $(targetFile).prop("files")[0]);

          $.ajax({
            url: './view/practice/file_api2.php',
            type: 'post',
            dataType: 'json',
            data: fd,
            processData: false,
            contentType: false
          })
          .done(function(res){
            console.log(res);
          })
          .fail(function(jqXHR, statusText, errorThrown){
            console.log(errorThrown);
          });
          return this;
        });
    });

    </script>
    <title>Ajax Sample</title>
  </head>
  <body>
    <h1>Ajax sample</h1>
    <form action="?action=upload" method="post" enctype="multipart/form-data">
      <ul id="file_list">
        <li class="each_file">
          <input type="file" id="up_file" class="input_file" name="upfile" value="" accept="image/*">
        </li>
      </ul>
      <input type="submit" id="submit_btn" value="画像アップロード">
    </form>
  </body>
</html>
<?php
  date_default_timezone_set('Asia/Tokyo');
  header("Content-type: text/json; charset=UTF-8");
  //直接のページ遷移を阻止
  $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
  if($request !== 'xmlhttprequest') exit;
  //画像の拡張子を取得
  $file_ext = pathinfo($_FILES['file']['name']);
  $time = date("YmdHis");
  //ファイル名を日付に変更
  $file_name = $time.".".$file_ext[extension];
  //保存先のパス
  //index.php file_api.phpと同層にupload_fileディレクトリが存在
  $file_path = "upload_file/".$file_name;

  $tmp_file = $_FILES['file']['tmp_name'];
  $result = move_uploaded_file($tmp_file, $file_path);
  //保存出来たらファイル名をjsonで返す
  if($result){
    echo json_encode($file_name);
  }
?>
<?php

require_once __DIR__ . '/../system/photon/photon.php';
require_once __DIR__ . '/../system/common.php';
ini_set('display_errors', 0);

function action_index2($data)
{
    render('view/practice/index2.php', $data);
}

function action_upload($data)
{
    var_dump($data);
    die;
}

?>

input type=textだと
コントローラー側の関数にそのname属性が引数のキー値となり、textの中身が渡ってきてくれます。
action_uploadという関数に送りたくてそこへのパスはこれで正しいのですが、ファイル名が渡ってくれないです
なので、ファイル名を取得してさらにhiddenのtextとかに格納できたらいいのかなとか思ってるのですが、難しくてできません(T_T)
よろしくお願いします
photonというライブラリを使ってます

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • masaya_ohashi

    2017/11/07 15:06

    あれ?昔はタグ申請用のフォームがトップ画面にあった気がしますが、見当たりませんね。右下の意見フォームにphotonタグを追加して欲しいと言えば多分対応してくれるでしょう

    キャンセル

  • oguramk5

    2017/11/07 15:08

    ありがとうございます

    キャンセル

  • masaya_ohashi

    2017/11/07 15:12

    質問を立てるときのタグ入力欄の右側に「タグの追加希望はこちら」というリンクがありますね。結局はteratail右下の「返信が必要なお問合わせはこちら」ページに飛ぶので、そこから要望を投げると良いでしょう。お問い合わせ内容の選択肢の中に「タグの追加要望」というものがあります。

    キャンセル

回答 1

checkベストアンサー

+2

たとえばこうしてください

$(function() {
  $('input[type=file]').on('change',function(){
    var fd = new FormData();
    fd.append("action","upload");//パラメータ渡し
    var file=$(this).prop('files')[0];
    var name=$(this).attr('name');
    var fr = new FileReader();
    fr.addEventListener("load", function(e){
      fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
      $.ajax({
        "url":"send.php",
        "type":"post",https://teratail.com/questions/editreply/153633
        "data":fd,
        "cache":false,
        "processData": false,
        "contentType": false,
      }).done(function(data){
        console.log(data);
      });
    });
    fr.readAsArrayBuffer(file);
  });
});
<form method="post" action="send.php" enctype="multipart/form-data">
<input type="file" name="myimg" accept="image/*"><br>
<input type="submit" value="go"><br>
</form>
  • send.php
<?php
print_r($_FILES);
print_r($_POST);
?>

 追記

以下multipleで3つまで同時送信できます。
※一部汎用的に書き直しました

$(function() {
  $('input[type=file]').on('change',function(){
    var fd = new FormData();
    fd.append("action","upload");
    var files=$(this).prop('files');
    var len=files.length;
    if(len>3) len=3;
    var name=$(this).attr('name');
    var defarr = [];
    for(var i=0;i<len;i++){
      defarr.push(setfile(files[i],name));
    };
    $.when.apply(null,defarr).done(function(){
      $.ajax({
          "url":"send.php",
          "type":"post",
          "data":fd,
          "cache":false,
          "processData": false,
          "contentType": false,
        }).done(function(data){
          console.log(data);
        });
      });
    function setfile(file,name){
      var def=$.Deferred();
      if(!file) return def.resolve();
      var fr = new FileReader();
      fr.addEventListener("load", function(e){
        fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
        return def.resolve();
      });
      fr.readAsArrayBuffer(file);
      return def.promise();
    }
  });
});
<form method="post" action="send.php" enctype="multipart/form-data">
<input type="file" name="myimg[]" accept="image/*" multiple><br>
<input type="submit" value="go"><br>
</form>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/07 15:02

    ありがとうございます、試してみます!

    キャンセル

  • 2017/11/07 16:11

    すみません、うまくできませんでした。
    三つまで画像を選択できて、送信すると、それらの画像がaction="関数名"の関数に渡るようにしたいです…

    キャンセル

  • 2017/11/07 16:16 編集

    > 三つまで画像を選択できて、送信する

    すみません、細かい仕様確認してませんでした
    1個だけなら例示のものでいけましたか?

    複数画像の選択のUIはmultipleで処理していますか?それともtype=fileを3つ用意しますか?
    それと前回はchangeイベントで処理していましたが、複数選択するということは
    なにか別のトリガーを利用しますか?

    キャンセル

  • 2017/11/07 16:27

    すみません、それと画像を削除したりもできるようにしてて、見た目と機能はできてるんですけどデータが渡って来なくて…。
    一個だけは教えてくださったのでできました、画面にファイル名が表示されました!
    それで二箇所のsend.phpを関数へのパスに変えて試してみたんですけど、関数(action_upload)にはデータは渡ってきませんでした…

    キャンセル

  • 2017/11/07 16:28

    多分multipleでやってると思います

    キャンセル

  • 2017/11/07 16:28

    画面上の動きは質問のコードで実現できてます

    キャンセル

  • 2017/11/07 16:30

    multipleならchangeでもいいですね、promiseで全部読み終わってから
    sendすればいけそうです。もう少しおまちください

    キャンセル

  • 2017/11/07 16:32

    すみません、ありがとうございます

    キャンセル

  • 2017/11/07 16:33

    あと、apiでファイル名を変えたり保存したりしてますが、この辺はやらなくて大丈夫で、もってきたソースコードをそのまま使っている感じです。

    キャンセル

  • 2017/11/07 17:56 編集

    multipleでファイルを送る方法を追記しておきました
    途中紆余曲折しましたが、一応3個まで同時に送れます
    (3個で制限しただけなので、必要ならもっと送れます)

    キャンセル

  • 2017/11/08 14:58

    ありがとうございます、試してみます(>_<)

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • PHP

    17769questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13825questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5819questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3386questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ajax

    958questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。