web入門
すばらしきwebの世界

Laravel 5.2 Ajax ファイルアップロード

2016.07.21Laravel, フレームワーク

表題の通り、LaravelでAjaxを使用してファイルアップロードを実行します。

前提とする環境はこちらを参照して下さい。環境

かつ、クライアント側はjquery(2.2.3)を使用し、サーバ側のアプリケーションにはLaravel(5.2.39)を使用します。

やることは以下です。少々ボリュームがあります。




実行内容の説明と前提

今回は、ブラウザから、入力テキスト及びアップロードファイルを選択し、送信ボタンを押下すると、テキストに入力した内容と、アップロードしたファイルが表示されるような動きを作成します。




クライアント側 – 入力画面 –

送信情報入力画面の情報は以下です。

パス:resources/views ← Laravelの画面格納ディレクトリ
ファイル名:client.blade.php ← .bladeはLaravelで利用できる画面。詳細は 別章 参照のこと。

入力テキストと、ファイル選択ボタンと送信ボタンのみ存在する簡単な画面です。

jqueryはCDNで読み込んでいます。所謂、jqueryをローカルではなくhttp経由で読みんでいますということです。

test.jsは今回自分で作成したjavaScriptファイルです。
onclick=”send();” はボタンを押下すると、send関数(自前の関数)が実行されます。send関数については、後に説明します。
なので、ここでは、onclick=”send();” ボタンを押下するとtest.jsのsend関数が実行されると覚えといてください。

メタタグにcsrfトークンを設定します。Laravelではcsrf対策をしています。
これを設定しないとcsrfトークンを送信できず、Laravelでエラーになります。
なので、ajax通信する場合、メタタグにcsrfトークンを設定することが必須となります。
詳細はLaravelの正式ドキュメントで確認して下さい。

idがmainの場所へサーバからの返答を表示します。




クライアント側 – jquery –

ファイルの情報は以下です。

パス:public ← Laravelのweb公開ディレクトリ。デフォルトでは “http://ドメイン名/public” です。
ファイル名:test.js

$.ajaxSetupでcsrfトークンをサーバへ送る準備をします。

‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)
client.blade.phpのメタタグに記載したcsrfトークンを取得し、http送信ヘッダに設定します。
こうすることで、csrfトークンをサーバに送信出来るので、laravel側では正常なhttp通信とみなしエラーを出力しなくなります。
画面のメタタグとajaxSetupでcsrfトークンを設定するということを覚えて下さい。
詳細はLaravelの正式ドキュメントで確認して下さい。

document.getElementById(“file”).files[0];
idが”file”で1番目のファイル(files[0])を指定します。

var form = new FormData();
通常はフォームタグ(

)が送信内容をくるんでくれますが、ajaxの場合、自分でformを作成し、送信内容をformに詰め込まないといけません。
なので、サーバに送信したいものをフォームオブジェクトに詰め込む為、フォームを生成します。
また、form.appendでテキスト、ファイルをフォームに詰め込みます。

ポスト送信時に以下2点を指定して下さい。

・processData
・contentType

processDataの詳しい詳細は正式ドキュメントを参照して下さい。
簡単に言うと、これをfalseにしないと、送信データが違う形式に変換されてしまうので、サーバ側で取得出来なくなります。

contentType : ‘multipart/form-data’
コンテンツタイプを指定します。
コンテンツタイプについては別を参照のこと。

送信するurlは “http://ドメイン名” 以降に続くパスを指定します。
ここではlocalホストを使用している為(http://localhost)、/testajax/testを指定します。
ここのURLの指定方法で少しハマりました。




サーバ側 – ルーティングの設定 –

パス:app/http
ファイル名:routes.js

“/”は http://ドメイン名 でアクセスすると、入力画面(client.blade.php)を表示します。

“/test”は http://ドメイン名/test でアクセスすると、TestControllerのtestメソッドを実行します。




サーバ側 – コントローラ –

パス:app/http/Controllers
ファイル名:TestController.php

通常、処理はコントローラーに記載しませんが、今回は説明の為、ご了承ください。

クライアントから送信されたフォームの内容をリクエストから取得しています。
最後に、クライアントへ返却する画面(html)を送信します。
返却する画面に、クライアントから取得したテキストの内容を渡しています。

$request->file(‘file’)->move($upload_file_path , “aaa.jpeg”);
アップロードしたファイルを移動しないとファイルが見れませんでした。




サーバ側 – 返却画面 –

パス:resources/views ← Laravelの画面格納ディレクトリ
ファイル名:client.blade.php ← .bladeはLaravelで利用できる画面。詳細は 別章 参照のこと。

クライアントへ部分的なhtmlを返却します。




最後に

成功するまで大変でした。
ハマったポイントは以下です。

  1. csrfトークンによるエラー
  2. ajax送信時のurl指定の仕方
  3. ajax送信時のprocessDataの指定
  4. ajax送信時のcontentTypeの指定
  5. ファイルアップロード後のファイル移動

http、webサーバ、php、Laravel、jquery(javaScript)の知識が必要となります。

覚えてしまえば、なんてことないかもですが、ここをきちんと全て理解するのは大変です。

頑張りましょう。