Multiple Images Uploading sử dụng dropzone.js và Laravel 5

Bài hôm này mình sẽ giới thiệu đến các bạn cách tải nhiều hình ảnh cùng lúc sử dụng dropzone.js

Chi tiết về dropzonejs bạn có thể lên trang dropzonejs.com để tìm hiểu.

Bước 1. Tạo route

routes/web.php
    Route::get('dropzone', 'HomeController@dropzone');
    Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController@dropzoneStore']);

Bước 2. Tạo các phương thức trong HomeController

app/Http/Controllers/HomeController.php
    namespace App\Http\Controllers;

    use App\Http\Requests;
    use Illuminate\Http\Request;

    class HomeController extends Controller
    {

        /**
         * Generate Image upload View
         *
         * @return void
         */
        public function dropzone()
        {
            return view('dropzone-view');
        }

        /**
         * Image Upload Code
         *
         * @return void
         */
        public function dropzoneStore(Request $request)
        {
            $image = $request->file('file');
            $imageName = time().$image->getClientOriginalName();
            $image->move(public_path('images'),$imageName);
            return response()->json(['success'=>$imageName]);
        }

    }

Bước 3. Tạo view dropzone-view

resources/views/dropzone-view.blade.php
    <!DOCTYPE html>
    <html>
    <head>
        <title>Upload Multiple Images using dropzone.js and Laravel</title>
        <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
        <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
    </head>
    <body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Upload Multiple Images using dropzone.js and Laravel</h1>
                {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
                <div>
                    <h3>Upload Multiple Image By Click On Box</h3>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <script type="text/javascript">
            Dropzone.options.imageUpload = {
                maxFilesize         :       1,
                acceptedFiles: ".jpeg,.jpg,.png,.gif"
            };
    </script>

    </body>
    </html>
Xem demo »