ドラッグアンドドロップで複数ファイルをアップロード【jQuery/Laravel】

6416 ワード
Laravel jQuery jQuery テキストリンク

いまさらながら複数ファイルアップロードするやり方を忘れないようにメモ

実現イメージ

赤いところにファイルをドロップするとファイルが追加されて、送信を押すとまとめてアップロードする最低限のサンプル

HTML

upload.blade.php
    <div id="upload_files_area" style="background-color:red; height:300px; width:100%;"></div>
    <button id="send">送信</button>

JavaScript

upload.js
    $(function(){
        //FormDataオブジェクトを作成
        var formData = new FormData();

        //ファイルがドロップされたときに呼ばれる
        $('#upload_files_area').on('drop', function(ev) {
            var files = ev.originalEvent.dataTransfer.files;
            for (var i = 0; i < files.length; i++) {
                //FormDataオブジェクトにファイルを追加
                //名前は'document_files[]'ってしてやる
                formData.append('document_files[]', files[i]);
            }
        });

        //送信
        $('#send').click(function(){
            $.ajax({
                url:'/upload_exec',
                type:'post',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
            });
        });
    });

PHP

UploadController
    public function uploadExec(Request $request)
    {
        $files = $request->file('document_files');
        foreach ($files as $file) {
            //ここではS3にアップロード
            Storage::disk('s3')->putFile('path', $file);
        }
    }

まとめ

これだけだとファイルをドロップしても画面上になにも表示されないので、実際にはFormDataに追加されているファイルを表示したり、削除するような機能を追加する必要があると思う。FormDataに追加されているファイルはformData.getAll('document_files[]');で配列として取得できるので、それを適当に操作してやると良い。