Trong phần trước chúng ta sẽ xem cách tải lên nhiều hình ảnh trong laravel 9. Đối với phần này, chúng ta sẽ xem cách chỉnh sửa cập nhật nhiều hình ảnh trong laravel 9. Trước khi chúng tôi bắt đầu, bạn cần đọc blog bên dưới
Ví dụ hướng dẫn tải lên nhiều hình ảnh của Laravel 9
Bây giờ Thêm phương thức Chỉnh sửa và Cập nhật
ứng dụng/Http/Bộ điều khiển/projectController. php
tài nguyên/lượt xem/dự án/chỉnh sửa. lưỡi. php
{{ __['Project Edit'] }}
@csrf
@method['put']
Name
@error['name']
{{ $message }}
@enderror
Images
@error['images']
{{ $message }}
@enderror
@foreach[$project->images as $image]
mục lục. lưỡi. tập tin php để hiển thị hình ảnh
laravel 9 hiển thị hình ảnh trước khi cập nhật
chỉnh sửa. lưỡi. php để cập nhật hình ảnh
laravel 9 chỉnh sửa hình ảnh
Sau khi cập nhật nhiều hình ảnh
laravel cập nhật nhiều hình ảnh
đọc thêm
Laravel 9 Tải lên nhiều hình ảnh bằng Thư viện phương tiện Spatie
Cách tải lên nhiều hình ảnh trong Laravel 9 có can thiệp
Cách cập nhật nhiều hình ảnh trong laravel 9
Tải lên hình ảnh với Thư viện phương tiện Spatie trong Laravel 9
Trong phần này, bạn không chỉ tìm thấy cách tải lên nhiều hình ảnh hoặc tệp mà không cần gửi biểu mẫu bằng cách sử dụng Ajax Jquery với PHP mà còn có thể tìm hiểu cách chỉnh sửa hoặc cập nhật thông tin hình ảnh trong cơ sở dữ liệu và thư mục cũng như xóa hoặc xóa hình ảnh khỏi . Trong một chủ đề này, chúng tôi đã đề cập đến nhiều chủ đề, vì vậy bạn có thể học được nhiều điều từ bài đăng này. Trong một trong những hướng dẫn của chúng tôi, chúng tôi đã thảo luận về cách tải lên một tệp mà không cần gửi biểu mẫu bằng cách sử dụng PHP với Ajax Jquery. Nhưng ở đây, chúng tôi đã tải lên nhiều hình ảnh với sự kiện gửi biểu mẫu sử dụng của chúng tôi bằng cách sử dụng Ajax JQuery làm giao diện người dùng và phần cuối của PHP và Mysql.
Khi nhiều hình ảnh được tải lên thư mục thì sau khi chúng tôi đã chèn các chi tiết hình ảnh đã tải lên như tên và mô tả hình ảnh trong bảng. Vì vậy, mọi dữ liệu hình ảnh được tải lên sẽ được chèn vào bảng Mysql. Sau khi tải lên hình ảnh, chúng tôi có bằng cách sử dụng chức năng Ajax tìm nạp chi tiết hình ảnh từ bảng Mysql và hiển thị trên trang web ở định dạng bảng với nút chỉnh sửa và xóa. Tất cả việc tải lên nhiều hình ảnh này và sau đó, quá trình chèn dữ liệu hình ảnh đã tải lên vào bảng mysql đã được thực hiện mà không cần làm mới trang web vì chúng tôi đã sử dụng Ajax cho những việc này với PHP và Mysql.
Sau khi tải lên hình ảnh thành công với dữ liệu được chèn vào bảng Mysql. Bây giờ, giả sử chúng tôi muốn chỉnh sửa hoặc cập nhật một số chi tiết như tên hình ảnh hoặc mô tả hình ảnh thì điều này chúng tôi cũng đã thực hiện bằng cách sử dụng phương thức Bootstrap. Khi chúng tôi nhấp vào nút chỉnh sửa thì chi tiết hình ảnh cụ thể đó đã xuất hiện cùng với Bootstrap Modal bật lên. Ở đây chúng ta không chỉ đổi được tên ảnh trong bảng Mysql mà nó còn đổi được cả tên ảnh trong thư mục nữa. Tương tự như vậy trong thao tác xóa hoặc xóa, nó sẽ không chỉ xóa dữ liệu hình ảnh khỏi bảng Mysql mà còn xóa hoặc xóa hình ảnh khỏi thư mục. Ở đây, tất cả quá trình này đã được thực hiện mà không cần làm mới trang web vì chúng tôi đã sử dụng Ajax Jquery với PHP Mysql. Tóm lại, trong bài viết này chúng ta đã thực hiện thao tác chèn cập nhật xóa nhiều ảnh trong PHP với Mysql.
Xem thêm
- Chèn nhiều hình ảnh vào cơ sở dữ liệu Mysql bằng PHP
- Hình ảnh Ajax Thêm Chỉnh sửa Xóa khỏi Cơ sở dữ liệu Mysql bằng PHP
- Ajax Tải lên nhiều hình ảnh với Chỉnh sửa Xóa bằng PHP Mysql
- Chèn và lấy hình ảnh từ cơ sở dữ liệu Mysql trong PHP
Mã nguồn
mục lục. php
Ajax Multiple Image Upload with Edit Delete using PHP Mysql
Ajax Multiple Image Upload with Edit Delete using PHP Mysql
Only .jpg, png, .gif file allowed
×
Edit Image Details
Image Name
Image Description
Close
$[document].ready[function[]{
load_image_data[];
function load_image_data[]
{
$.ajax[{
url:"fetch.php",
method:"POST",
success:function[data]
{
$['#image_table'].html[data];
}
}];
}
$['#multiple_files'].change[function[]{
var error_images = '';
var form_data = new FormData[];
var files = $['#multiple_files'][0].files;
if[files.length > 10]
{
error_images += 'You can not select more than 10 files';
}
else
{
for[var i=0; i 2000000]
{
error_images += '' + i + ' File Size is very big
';
}
else
{
form_data.append["file[]", document.getElementById['multiple_files'].files[i]];
}
}
}
if[error_images == '']
{
$.ajax[{
url:"upload.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function[]{
$['#error_multiple_files'].html['
Uploading...'];
},
success:function[data]
{
$['#error_multiple_files'].html['
Uploaded'];
load_image_data[];
}
}];
}
else
{
$['#multiple_files'].val[''];
$['#error_multiple_files'].html[""+error_images+""];
return false;
}
}];
$[document].on['click', '.edit', function[]{
var image_id = $[this].attr["id"];
$.ajax[{
url:"edit.php",
method:"post",
data:{image_id:image_id},
dataType:"json",
success:function[data]
{
$['#imageModal'].modal['show'];
$['#image_id'].val[image_id];
$['#image_name'].val[data.image_name];
$['#image_description'].val[data.image_description];
}
}];
}];
$[document].on['click', '.delete', function[]{
var image_id = $[this].attr["id"];
var image_name = $[this].data["image_name"];
if[confirm["Are you sure you want to remove it?"]]
{
$.ajax[{
url:"delete.php",
method:"POST",
data:{image_id:image_id, image_name:image_name},
success:function[data]
{
load_image_data[];
alert["Image removed"];
}
}];
}
}];
$['#edit_image_form'].on['submit', function[event]{
event.preventDefault[];
if[$['#image_name'].val[] == '']
{
alert["Enter Image Name"];
}
else
{
$.ajax[{
url:"update.php",
method:"POST",
data:$['#edit_image_form'].serialize[],
success:function[data]
{
$['#imageModal'].modal['hide'];
load_image_data[];
alert['Image Details updated'];
}
}];
}
}];
}];
database_connection. php
tìm nạp. php
tải lên. php