You are here
Home > !Laravel > ファイルのアップロード(5)複数の画像ファイルをアップロード

ファイルのアップロード(5)複数の画像ファイルをアップロード

Dropzone.jsを使用する利点は、ファイルアップロードの途中経過を表示するようになりUIが良くなるだけでありません。1画面で複数の画像ファイルを一度にアップすることができます。

もちろん、以下のように複数のファイルのアップロードは、Dropzone.jsを使用しなくても可能です。

<form
    method="POST"
    action="/demo/public/user/upload"
    class="form-horizontal"
    role="form"
    enctype="multipart/form-data">
    {{ csrf_field() }}
...
    <input type="file" name="file1">
    <input type="file" name="file2">
...
</form>

しかし、以下のポストで説明したように、

ファイルのサイズの制限・制限なしでも制限ある

ウェブサーバーによる制限により、1フォームでアップロードできるファイルの数は、すべてのファイルを足したファイルのサイズになります。

例えば、

post_max_size = 2M
upload_max_filesize = 1M

の設定なら、1フォームでは、最大1Mのファイルが2つまでしかアップロード可能でありません。

しかし、Dropzone.jsを使用すれば、ajaxを使用するので、それぞれのファイルアップロードは、1フォームで1つのファイルのアップロードとなり、この例では、1Mファイルをいくつでもアップロード可能となります。

そして、この複数のファイルのアップロードに対応するプログラムの変更といえば、

まず、フロントエンド、

Dropzone.jsでアップロード途中経過を表示

とまったく同じです。変更はありません。

アップロード時、複数のファイルを選択してドラッグするか、ファイルダイアログで複数のファイルを選択して実行すれば以下のようにアップされます。
multiple

バックエンドは、

namespace App\Http\Controllers\User;
 
use Illuminate\Http\Request;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Validator;
 
class UserController extends Controller
{
...
    public function getUpload()
    {
        return view('user/upload');
    }
 
    public function postUpload(Request $request)
    {
        $file = $request->file('file');
        $filename = $file->getClientOriginalName();
        $file->move(public_path('images'), $filename)
    }
}

と、アップしたファイル名で、/public/imagesのディレクトリに保存するように変更します。

同時にアップするファイル数を制限したいなら、

<script type="text/javascript">
       
Dropzone.options.imageUpload = {
    dictDefaultMessage: 'アップロードするファイルをここへドロップしてください',
    acceptedFiles: '.jpg, .jpeg',
    maxFilesize: 5 // 5MBまで
  maxFiles: 2 // ファイルは2つまでアップロード可能
}
</script>

と、Dropzone.jsの設定で、maxFilesを指定します。

only2

このように3番目のファイルは、アップロード不可となります。

Leave a Reply

Top