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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

PHP

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

JavaScript

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

jQuery

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

Ajax

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

Q&A

解決済

1回答

3122閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

PHP

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

JavaScript

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

jQuery

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

Ajax

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

0グッド

2クリップ

投稿2017/11/07 04:51

編集2017/11/07 06:24

php(view)(index2.php)

1 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style media="screen"> 8 li{ 9 list-style: none; 10 } 11 </style> 12 <script type="text/javascript"> 13 $(function(){ 14 var $fileList = $('#file_list'); 15 $fileList 16 //削除がクリックされた場合の処理 17 .on('click.deleteFile', '.delete_btn', function(){ 18 var $li = $(this).closest('.each_file'); 19 $li.remove(); 20 //inputタグ数が4つ未満になった場合に再度表示させる処理 21 var $fileListLI = $('#file_list li input[name=img_file]'); 22 var inputFileNum = $fileListLI.length; 23 //最後のinputタグを表示する処理 24 var lastInputFile = $fileListLI.eq(-1); 25 if (inputFileNum < 4){ 26 $(lastInputFile).show(); 27 } 28 return false; 29 }) 30 31 $fileList 32 //inputタグに画像が追加された場合の処理 33 .on('change.inputFile', '.input_file', function(e){ 34 var $input = $(this), 35 $li = $input.closest('.each_file'), 36 $newLi = $li.clone(); 37 $fileList.append($newLi); 38 //サムネイル画像を表示する処理 39 var file = e.target.files[0], 40 fileName = file.name; 41        //FileReaderオブジェクトの生成 42 reader = new FileReader(); 43 reader.readAsDataURL(file); 44 45 reader.onloadend = function(){ 46 var fileReader = this; 47 if(fileReader.result){ 48 var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>'; 49 $li.append(thumb); 50 } 51 return this; 52 }; 53 $input.hide(); 54 55 //画像が3つになった場合にinputタグを非表示にする処理 56 //上にも同じコードがあるのでまとめた方がいいのですが... 57 var $fileListLI = $('#file_list li input[name=img_file]'); 58 var inputFileNum = $fileListLI.length; 59 var lastInputFile = $fileListLI.eq(-1); 60 if (inputFileNum == 4){ 61 $(lastInputFile).hide(); 62 } 63 64 //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理 65 var fd = new FormData(); 66     //最後から2番目のinputタグを拾う処理 67     //画像が選択されるinputタグは必ず最後から2番目 68 var targetFile = $fileListLI.eq(-2); 69     //1画像毎のUPなので[0]、複数である場合は[1][2]... 70 fd.append( "file", $(targetFile).prop("files")[0]); 71 72 $.ajax({ 73 url: './view/practice/file_api2.php', 74 type: 'post', 75 dataType: 'json', 76 data: fd, 77 processData: false, 78 contentType: false 79 }) 80 .done(function(res){ 81 console.log(res); 82 }) 83 .fail(function(jqXHR, statusText, errorThrown){ 84 console.log(errorThrown); 85 }); 86 return this; 87 }); 88 }); 89 90 </script> 91 <title>Ajax Sample</title> 92 </head> 93 <body> 94 <h1>Ajax sample</h1> 95 <form action="?action=upload" method="post" enctype="multipart/form-data"> 96 <ul id="file_list"> 97 <li class="each_file"> 98 <input type="file" id="up_file" class="input_file" name="upfile" value="" accept="image/*"> 99 </li> 100 </ul> 101 <input type="submit" id="submit_btn" value="画像アップロード"> 102 </form> 103 </body> 104</html> 105

php(api)(file_api2.php)

1 2<?php 3 date_default_timezone_set('Asia/Tokyo'); 4 header("Content-type: text/json; charset=UTF-8"); 5 //直接のページ遷移を阻止 6 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; 7 if($request !== 'xmlhttprequest') exit; 8 //画像の拡張子を取得 9 $file_ext = pathinfo($_FILES['file']['name']); 10 $time = date("YmdHis"); 11 //ファイル名を日付に変更 12 $file_name = $time.".".$file_ext[extension]; 13 //保存先のパス 14 //index.php file_api.phpと同層にupload_fileディレクトリが存在 15 $file_path = "upload_file/".$file_name; 16 17 $tmp_file = $_FILES['file']['tmp_name']; 18 $result = move_uploaded_file($tmp_file, $file_path); 19 //保存出来たらファイル名をjsonで返す 20 if($result){ 21 echo json_encode($file_name); 22 } 23?> 24

php(コントローラー)

1<?php 2 3require_once __DIR__ . '/../system/photon/photon.php'; 4require_once __DIR__ . '/../system/common.php'; 5ini_set('display_errors', 0); 6 7function action_index2($data) 8{ 9 render('view/practice/index2.php', $data); 10} 11 12function action_upload($data) 13{ 14 var_dump($data); 15 die; 16} 17 18?>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2017/11/07 05:06

コントローラー側とはどれを指していますか?一般的なPHPフレームワークではコントローラーはphp側にあるものを指しますが、もしかしてHTMLのことを指していますか?
退会済みユーザー

退会済みユーザー

2017/11/07 05:15

コントローラーを追加しました。あるライブラリを使っているのでわかりにくかったらすみません。viewはindex2という関数で表示させてます。とりあえず今のパスの書き方で、action_uploadにいくことはできます。var_dumpしてるのでアップロードボタンを押したら次の画面で画像の名前が表示されてくれたら嬉しいです。
退会済みユーザー

退会済みユーザー

2017/11/07 05:16

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

2017/11/07 05:23

photonというフレームワークを使っているようですね。私は使ったことがないので、質問のタグにphotonを追加したら誰かから回答が得られるかもしれません。
masaya_ohashi

2017/11/07 05:24

それと、提示されているコード3つのうち真ん中のものは一体なんのファイルですか?どうアクセスが来た際に実行されるPHPですか?できればコードの前に「このコードは何のファイルか」というのが分かる記載をしておいたほうがよいです。
退会済みユーザー

退会済みユーザー

2017/11/07 06:02

すみません、タグがありませんでした(>_<)
masaya_ohashi

2017/11/07 06:03

ではせめてタイトルにphotonと付けたほうがよいです。また、タグの追加申請をteratailにすれば、需要が認められているものであればすぐ対応してくださいます。
masaya_ohashi

2017/11/07 06:06

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

退会済みユーザー

2017/11/07 06:08

ありがとうございます
masaya_ohashi

2017/11/07 06:12

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

回答1

0

ベストアンサー

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

javascript

1$(function() { 2 $('input[type=file]').on('change',function(){ 3 var fd = new FormData(); 4 fd.append("action","upload");//パラメータ渡し 5 var file=$(this).prop('files')[0]; 6 var name=$(this).attr('name'); 7 var fr = new FileReader(); 8 fr.addEventListener("load", function(e){ 9 fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name ); 10 $.ajax({ 11 "url":"send.php", 12 "type":"post",https://teratail.com/questions/editreply/153633 13 "data":fd, 14 "cache":false, 15 "processData": false, 16 "contentType": false, 17 }).done(function(data){ 18 console.log(data); 19 }); 20 }); 21 fr.readAsArrayBuffer(file); 22 }); 23});

HTML

1<form method="post" action="send.php" enctype="multipart/form-data"> 2<input type="file" name="myimg" accept="image/*"><br> 3<input type="submit" value="go"><br> 4</form> 5
  • send.php

PHP

1<?php 2print_r($_FILES); 3print_r($_POST); 4?>

追記

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

javascript

1$(function() { 2 $('input[type=file]').on('change',function(){ 3 var fd = new FormData(); 4 fd.append("action","upload"); 5 var files=$(this).prop('files'); 6 var len=files.length; 7 if(len>3) len=3; 8 var name=$(this).attr('name'); 9 var defarr = []; 10 for(var i=0;i<len;i++){ 11 defarr.push(setfile(files[i],name)); 12 }; 13 $.when.apply(null,defarr).done(function(){ 14 $.ajax({ 15 "url":"send.php", 16 "type":"post", 17 "data":fd, 18 "cache":false, 19 "processData": false, 20 "contentType": false, 21 }).done(function(data){ 22 console.log(data); 23 }); 24 }); 25 function setfile(file,name){ 26 var def=$.Deferred(); 27 if(!file) return def.resolve(); 28 var fr = new FileReader(); 29 fr.addEventListener("load", function(e){ 30 fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name ); 31 return def.resolve(); 32 }); 33 fr.readAsArrayBuffer(file); 34 return def.promise(); 35 } 36 }); 37});

HTML

1<form method="post" action="send.php" enctype="multipart/form-data"> 2<input type="file" name="myimg[]" accept="image/*" multiple><br> 3<input type="submit" value="go"><br> 4</form>

投稿2017/11/07 05:21

編集2017/11/07 08:54
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/11/07 06:02

ありがとうございます、試してみます!
退会済みユーザー

退会済みユーザー

2017/11/07 07:11

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

2017/11/07 07:16 編集

> 三つまで画像を選択できて、送信する すみません、細かい仕様確認してませんでした 1個だけなら例示のものでいけましたか? 複数画像の選択のUIはmultipleで処理していますか?それともtype=fileを3つ用意しますか? それと前回はchangeイベントで処理していましたが、複数選択するということは なにか別のトリガーを利用しますか?
退会済みユーザー

退会済みユーザー

2017/11/07 07:27

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

退会済みユーザー

2017/11/07 07:28

多分multipleでやってると思います
退会済みユーザー

退会済みユーザー

2017/11/07 07:28

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

2017/11/07 07:30

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

退会済みユーザー

2017/11/07 07:32

すみません、ありがとうございます
退会済みユーザー

退会済みユーザー

2017/11/07 07:33

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

2017/11/07 08:56 編集

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

退会済みユーザー

2017/11/08 05:58

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問