ファイルのアップロード(5)複数の画像ファイルをアップロード
Dropzone.jsを使用する利点は、ファイルアップロードの途中経過を表示するようになりUIが良くなるだけでありません。1画面で複数の画像ファイルを一度にアップすることができます。
Dropzone.jsを使用する利点は、ファイルアップロードの途中経過を表示するようになりUIが良くなるだけでありません。1画面で複数の画像ファイルを一度にアップすることができます。
前回のDropzone.jsを使用したファイルアップロードのフロントエンドに対して、サーバーサイドのバックエンドをLaravelでプログラムします。つまり、アップロードされたファイルを受け取るプログラムです。
今まで話したファイルアップロードは、基本でもっとも簡単にプログラムできるものです。 しかし、アップロードするファイルのサイズが大きく、アップロードに時間がかかるようになると、送信ボタンを押してからじ~っと何も起きない画面を見ているのは、退屈でもありちょっと心配ですね。これ、ちゃんと動いているのかなと。 要は、「アップロード中です」とか「80%アップロード完了」したとか、しかもそれをビジュアルで伝えてくれれば最高です。それを行ってくれるのが今回紹介するツール、Dropzone.jsです。
ファイルのアップロードと言っても、なんのフォーマットのファイルでもアップをしてよいというわけではありません。たいていは画像ファイルのアップロードになりますが、それでもGIFはアップしてもらいたくない、JPEGだけが欲しいとか。 そのときは、バリデーションを使用してアップしたファイルのMIMEの情報をもとにプログラムで制限します。
入力フォーム画面でのファイルのアップロードは、他のテキストの入力と違っていろいろなことを考慮する必要があり、開発はそう簡単ではありません。PHPのマニュアルでも、説明のためだけに一章を費やしています。 もちろん、Laravelを使うことで開発はかなり簡単になるのだけれど、注意する点やアップしたファイルをどう使用するか...などたくさんのトピックあります。以下、いくつか興味あるトピックをリストしました。
今回は人気のドロップダウンスクリプト、Select2を紹介します。
今回は、前回作成した会員編集フォームを、Laravel CollectiveのForm & HTMLを使用して書き換えてみます。
新規のLaravelのプロジェクトは、以下の実行で作成できます。
Laravelのマニュアルは、ほどよい説明で気に入っています。長い説明でポイントがつかめなく困ることはそうありません。理解には何回か読むことも必要ですが。 しかし、ときには掲載されるサンプルコードがよく使用されるような例ではなく、逆に混乱してしまうことあります。