VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

 

I. UPLOAD FILE 

 

Bước 1 : Dựng view cho ứng dụng

ta có 1 form dữ liệu như sau. Thẻ div có id dropzone là vòng để chèn file upload

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Bước 2 : Chèn file css của thư viện vào header và file js của thư viện vào footer của dự án

 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Bước 3 : Khai báo các thông số cho dropzone như hình sau 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Chú ý : uploadMultiple chúng ta khai báo true, nếu để false sẽ không upload được nhiều file

Mỗi lúc chúng ta chọn file xong, chưa bấm nút submit form thì file cũng được thư viện tự động gửi lên server rồi. nó sẽ gửi vào cái route chúng ta khai báo ở thành phần url như trên

Trong laravel bắt buộc chúng ta phải truyền thêm cái _token, key này là mặc định, không được đặt key khác

Bước 4 : Khai báo route như hình trên cho thư viện upload file lên server

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Chúng ta khai báo cái route như thế này trong group route admin, nó sẽ đi vào GalleryController và đi vào hàm handleUpload

Bước 5 : Viết hàm xử lý upload multi để hứng dữ liệu mà thư viện dropzone tự động gửi lên

 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Trong hàm trên ta nói rằng nếu chưa có cái thư mục upload/tmp thì ta sẽ tạo ra thư mục đó trên server mà có rồi thì thôi

Tiếp theo chúng ta kiểm tra mảng file được upload lên từ frontend, chúng ta nói rằng nếu màng đó khác rỗng thì sẽ lặp qua từng mảng con trong nó để tải từng file lên server.

Trong hàm trên ta có gọi thêm một hàm m move_uploaded_file của php để tải file lên

Ta mới chỉ cần chọn file thôi chưa cần submit form mà các file đã được gửi lên server và lưu ở thư mục chúng ta vừa tạo ở hàm trên

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

 

Bước 6 : Sau khi chọn file xong thì làm cách nào đó để ta lấy được thông tin của file đó khi ta submit form, chứ hành động thư viện tự động upload file lên thì chưa liên quan gì đến form dữ liệu của chúng ta

Ta sẽ làm như sau 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Cũng ở phần khai báo js dropzone ta viết thêm như hình, từ khóa addedfile là mặc định của thư viện, không được thay đổi

Ta nói rằng khi file được chọn xong thì ta thêm 3 thẻ input gồm có name và giá trị tương tứng như hình vào cái form upload của chúng ta

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Nó sẽ trông như thế này, như vậy là khi bấm submit thì ta sẽ lấy được dữ liệu từ các mảng có tên trong thẻ input vừa khai báo

Ở form dữ liệu trong ứng dụng này mình có thêm một trường module để phân biệt file upload lên để sử dụng cho module nào. Bạn có thể thêm các trường dữ liệu khác mà bạn cần sử dụng cho mục đích của mình

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Bước 6 : Khai báo route để submit form

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Route get để tải cái view ban đầu, còn route post để gọi hàm xử lý khi ta bấm submit form nhé

Bước 7 : Viết hàm xử lý submit form

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Ở hàm này ta nhận dữ liệu từ frontend gửi lên và chuyển nó qua hàm uploadMultiFile để xử lý

Khai báo hàm uploadMultiFile như sau

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Hàm trên ta có các tham số truyền vào như hình: gổm mảng file, mảng alt của file, file cũ nếu có (có thể bỏ) và module

Ta sẽ khai báo các đường dẫn path như hình, trong đó 

$path : Là đường dẫn đến thư mục chứa những file mà như viện dropzone tự động upload lên

$path_after : là đường dẫn chúng ta sẽ copy file từ thư mục của dropzone sang thư mục chính của chúng ta, sau khi xử lý xong thì chúng ta có thể xóa các file trong thư mục của dropzone hoặc không thì tùy bạn

Ở hàm trên chúng ta lặp qua mảng file truyền lên, và kiểm tra nếu có file cũ thì gọi hàm remove để xóa file cũ đi, vì có file mới up lên trùng file cũ. Tiếp đến gọi đến hàm randomFilename để lấy tên file và khai báo đường dẫn url cho file trước khi thêm vào database. Tiếp đến chúng ta thêm từng file đó vào cơ sở dữ liệu và copy file từ thư mục tạm sang thư mục chính. Nếu không có lỗi xảy ra thì sau khi chạy vòng lặp xong thì nó quay lại chạy tiếp hàm postAdd và redirect về trang danh sách file.

Hàm removeFile ta khai báo như sau 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Nó sẽ kiểm tra nếu file tồn tại trong thư mục tạm thì xóa file đó đi.

Hàm randomFilename ta khai náo như sau

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Khi chạy qua hàm này thì tên file sẽ được random mặc định

II. SẮP XẾP FILE SAU KHI UPLOAD

Thư viện sortable đã được tích hợp sẵn vào jquery UI, bạn chỉ cần chèn thư viện jqueryUI là có thể sử dụng rồi

Bước 1 : Cấu hình html cho việc sắp xếp dữ liệu

Ở thẻ div bao ngoài các item ta đặt id cho nó, và khai báo thêm 2 input nằm ở vùng ngoài để lưu giá trị page và limit

page : Là trang số mấy

limit : là số bản ghi trên 1 trang

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Bước 2 : Khai báo js cho việc sắp xếp dữ liệu

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Ta nói rằng sau khi trình duyệt tải xong thì sẽ khai báo các biến: page, limit, base, token như hình trên. Sau đó ta gọi hàm sortable cảu jquey áp dụng cho phần tử có id sortable.

Nội dung trong hàm sortable có nghĩa rằng khi ta thực hiện lệnh kéo thả vào 1 item nào đó trong khối div có id sortable thì nó sẽ lặp qua các item mà nó chứa và kiểm tra thuộc tính data-position, nếu khác chỉ số index của vòng lặp cộng thêm 1 thì nó sẽ gán cho thuộc tính data-position chính bằng giá trị index+1 đó luôn, đồng thời add thêm class updated vào item đó. Tiếp theo nó gọi hàm saveNewPosition để lưu lại vị trí.

Bước 3 : khai báo hàm gọi ajax để lưu lại vị trí

 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Lúc này ta dựa vào class updated vừa add ở bước 2 để lặp qua các item, và push giá trị data-position vào một mảng mới. sau đó gửi mảng data-position này lên server để lưu lại, trong hình các biến page, limit, token đã được khai báo toàn cục.

Bước 4 : Khai báo route cho hàm ajax ở bước 2 như sau 

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Dữ liệu sẽ được gửi vào hàm sort trong controller gallery để xử lý

Bước 5 : Khai báo hàm xử lý sort

Upload nhiều ảnh bằng dropzone và kéo thả để sắp xếp các phần tử trong laravel

Ở hàm trên ta nói rằng nếu như biến page = 1 tức chúng ta đang thực hiện việc kéo thả ở trang 1 thì biến sort không cần cộng thêm giá trj limit. còn nếu chúng ta đứng ở trang 2 trở đi thì biết sort cộng thêm giá trị là số bản ghi trên một trang nhân với số trang sau đó cộng với giá trị position, xem minh họa hình trên.

sau khi có được biết sort rồi ta thực hiện hành động lưu giá trị $sort vào trường sort trong cơ sở dữ liệu theo id của từng item. Vậy là xong rồi

Chúc bạn thành công !