<input type="file">の値「ファイル名」「テンポラリファイルの名前」をjQueryで取得するには？

現在cakePHP3,PHP,HTML(ctp),JavaScript(jQuery)を使って画像のアップロード機能を開発をしています。

状況としては以下です。
Form内に<input type="text">と<input type="file">があります。

その値をAjaxを使って渡そうとしています。

$('form').serialize();

で取得した値をAjaxのdataとして通常なら渡していたのですが、<input type="file">の値はそれでは取れてきません。

他にjQuery(Javascript)を使って<input type="file">の値を取得する方法はあるでしょうか？

よろしくお願い致します。

Ryo

2016/04/24 16:44

タイトルの「name」「tmp_name」に該当するものを具体的に書いてください。（質問の修正）

k499778

2016/04/24 23:06

修正しました。

行動規範の内容に同意します

回答2件

ベストアンサー

【jquery file upload - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&hl=ja&q=jquery+file+upload

【jQuery.ajax()でファイルをアップロードする方法: 小粋空間】
http://www.koikikukan.com/archives/2014/09/30-013333.php

【Ajax uploads with FormData | TecPoster】
http://www.tecposter.com/ajax-uploads-with-formdata/

【Ajaxによるmultipart/postでの画像ファイルアップロード : アシアルブログ】
http://blog.asial.co.jp/1260

【jQuery Ajaxでファイルを送りたい！ - かもメモ】
http://chaika.hatenablog.com/entry/2014/04/12/001012

【FormData - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/FormData

【FormData オブジェクトの利用 - Web developer guide | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects

投稿2016/04/25 02:01

kei344

総合スコア69400

k499778

2016/04/25 10:35

回答ありがとうございます。ファイルアップロードのために、 PHP側で getimagesize()でmimetypeを取得し、curl_file_create()をしたファイルオブジェクトを取得する方法を使っています。そのためにファイルのtmp_nameが知りたいのですが、formDataを使わずにAjaxで行う方法はないでしょうか？本日formDataを試してみると、PHP側でfileの値がしゅとくできませんでした。他の原因も検証中ですが、もしもの時のため知りたいなと思っています。もし何か知っていれば教えていただけたらなと思います。

行動規範の内容に同意します

ファイルのどの値を取得したいのかは、分かりませんが
<input type="file">で選択した値（ファイル含む）は取得できます。
ブラウザが関連APIに対応してないとだめですけど…

このサイトが参考になるかもです。
HTML5 Rocks

html
1<!-- id指定のほうがやりやすいので… -->
2<input type="file" id="inputFile">

javascript
1var files;
2
3$(function(){
4  $('#inputFile').on('change',function(e){
5    // ファイルのリストを取得
6    files = e.target.files;
7
8    // $(this)[0].files; でも可
9    // [0] 忘れないように！
10
11    // コンソールに出力なり何なりしてみるといいかもです。
12    // console.log(files);
13  });
14});
15

投稿2016/04/24 16:32

Ryo

総合スコア507

k499778

2016/04/25 00:13

回答ありがとうございます。この方法は勉強していました。 seliarizeメソッドのように form内の値を一気に取ってくる方法で、<input type="file">の内容も取ってくるやり方はやはりないでしょうか？

k499778

2016/04/25 10:40

PHP側の処理でファイルのtmp_name(テンポラリファイルの名前)が必要でした。 e.target.filesにはtmp_nameぁ含まれていないため、その値を取得することができません。サーバーにあげていないので一時ファイル名がある方がおかしいのかましれませんが。もしjavascriptでtmp_nameを取得する他のやり方をご存知であれば教えて頂きたいです。

Ryo

2016/04/26 12:55

テンポラリファイルはブラウザによって挙動が違ったと記憶してます。 IEはクライアント側の user/app/ 配下のどこかに作られてた気がします。その他はテンポラリファイルを作成しなかったような気が… 曖昧な記憶ですが。 Web アプリケーションからファイルを扱う | MDN https://developer.mozilla.org/ja/docs/Using_files_from_web_applications

行動規範の内容に同意します

あなたの回答