Upload nhiều ảnh trong laravel bằng ajax

upload nhiều ảnh cùng lúc hay upload multiple images là yêu cầu rất phổ biến hiện nay khi viết hệ thống hay website. Tuy nhiên trên mạng hiện chưa có bài viết nào chia sẽ một cách đầy đủ và có thể hoạt động được.

Vì vậy ở bài viết này hanhtinhcongnghe.com sẽ giới thiệu đến bạn cách upload nhiều ảnh trong laravel cùng lúc.

HTML cho upload nhiều ảnh cùng lúc trong laravel

Để upload một hình ảnh hay một file, chúng ta chỉ cần dùng thẻ input html với type=”file” là được.

<input type="file" name="inputname" id="inputname">

Tuy nhiên khi upload nhiều hình ảnh cùng lúc thì chúng ta cần phải sử dụng đến mảng để có thể lưu trữ nhiều file cùng lúc. Nên ở phần name của trong input html chúng ta cần đặt tên ở dạng mảng và kèm với đó là thêm vào attribute multiple=”multiple”.

<input type="file" name="inputname[]" id="inputname" multiple="multiple">

Với đoạn html trên, khi bấm vào nút tải file bạn sẽ thấy hiện ra tất cả các file có các định dạng khác nhau và bạn có thể chọn file bất kỳ để upload. Tuy nhiên ở đây chúng ta chỉ muốn người dùng upload file ảnh mà thôi. Nên chúng ta cần tiếp tục thêm atrribute accept=”image/*” vào sau multiple

<input type="file" name="inputname[]" id="inputname" multiple="multiple" accept="image/*">

Ajax cho upload nhiều ảnh trong laravel

Bạn có thể upload hình ảnh trong laravel bằng form theo cách truyền thống, nhưng có những lúc bạn cần phải dùng Ajax để phù hợp với nhu cầu của mình.

Trong Laravel Ajax upload ảnh này chúng ta sẽ sử dụng FormData để upload ảnh và lưu trữ dữ liệu. Dưới đây là đoạn Ajax úp ảnh mà bạn cần.

$('.btn-save').on('click',function(e){
                var formData = new FormData(); 

                formData.append('_token', '{{ csrf_token() }}');
                
                let TotalImages = $('#inputname')[0].files.length; //Total Images
                let images = $('#inputname')[0];
                for (let i = 0; i < TotalImages; i++) {
                    formData.append('inputname[]', images.files[i]);
                }

                $.ajax({
                    url: '{{ route("uploadanh.store","") }}',
                    method: 'POST',
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    
                    success: function(data){
                        Swal.fire(
                        data.title,
                        data.message,
                        data.type,
                        ).then(function () {
                        });
                    },
                    error: function(data){
                         
                    }
                });
            });

Laravel controller cho upload nhiều ảnh cùng lúc

Sau khi đã có html và ajax rồi thì việc còn lại của ta lúc này là xử lý việc lưu trử file cũng như lưu trữ dữ liệu vào bảng dữ liệu.

Chúng ta sẽ kiểm tra dữ liệu gửi về từ ajax cho controller có file ảnh không, nếu có file ảnh thì chúng ta sẽ tiến hành upload lần lượt các hình ảnh lên thư mục lưu trữ hình ảnh. Sau khi lưu trữ hình ảnh chúng ta sẽ lưu tên các file ảnh vào trong một biến ở dạng mảng.

$imageNames = [];
        if ($request->hasFile('inputname')) {
            foreach ($request->file('inputname') as $key => $file) {
                $filename = $file->getClientOriginalName();
                $original_filename = pathinfo($filename, PATHINFO_FILENAME);
                $extention         = $file->getClientOriginalExtension();
                $stored_filename   = $original_filename.'-'.date('YmdHis').'.'.$extention; 
                if (Storage::disk('local')
                        ->exists("public/uploads/{$stored_filename}")) 
                {
                    Storage::disk('local')
                        ->delete("public/uploads/{$recordSet->stored_filename}");
                } 
                $file_moved = $file->move(public_path('uploads/'), "{$stored_filename}");
                $imageNames[] = "{$stored_filename}"; 
            }
            $request->inputname = json_encode($imageNames); 
        }else{
            $request->inputname = DB::table('tbl_images')->where('id',$id)->value('images');
        }

Ở đoạn code trên chúng ta sẽ lưu hình ảnh tải lên vào thư mục uploads trong public. Các tên file ảnh lưu trong biến mảng $imageNames[], chúng ta chuyển dữ liệu trong biến này vào lại $request->inputname. Từ đây chúng ta có thể lưu giá trị trong $request->inputname vào database của mình.

Hiển thị hình ảnh sau khi upload nhiều ảnh cùng lúc trong laravel

Sau khi đã upload và lưu trữ được hình ảnh vào database thì chúng ta tiến hành hiển thị hình ảnh từ database và thư mục uploads ra. Dưới đây tôi sử dụng DataTable để hiển thị dữ liệu nên đoạn code hiển thị hình ảnh.

{   data: 'images',
                        render: function(data){
                            var arr = JSON.parse(data);
                            let text = "";
                            if(data !== null){
                                arr.forEach(function(image,index) {
                                    if(image !== null){
                                        text += '<a id="frontImage" href="../uploads/'+image+'" data-lightbox="'+image+'">'+
                                                '<img class="mr-2" src="../uploads/'+image+'" width="50px" height="50px"></a>';
                                    }
                                });
                            }
                            return text;
                        }
                    },

Như vậy là chúng ta đã có thể upload nhiều ảnh trong laravel cùng lúc bằng Ajax. Bạn có thể tuỳ biến để phù hợp với thực tế của mình. Nếu có bất cứ thắc mắc nào bạn có thể để lại bình luận bên dưới.