Danh Mục Bài Viết
Ok anh em, Bài này rất quan trọng nhé! Việc áp dụng Ajax trong Laravel cũng sẽ tương tự như Php. Các bạn tham khảo các bài viết trong chuỗi bài viết liên quan đến Php-MySqli-DataBase Cơ Bản. Hoặc xem ngay và luôn tại đây giúp mính. Đặc biệt là 2 bài viết:
Tuy nhiên trong Laravel các bạn cũng sẽ cần lưu ý thêm một số điều mà mình sẽ đề cập ngay sau đây:
1, Các bạn cần thêm dòng code sau đây và trong cặp thẻ <head>
<meta name="csrf-token" content="{{ csrf_token() }}">Đồng thời tại đầu file Js mà bạn code Ajax bạn thêm:
$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});Tại sao phải thêm 2 dòng trên thì các bạn tham khảo têm tài liệu của Laravel tại đây
2, Bạn thêm đoạn script sau vào file .Js
<script>
$('#file').on('change',()=>{
var formData = new FormData();
var file = $('#file')[0].files[0]
formData.append('file',file)
$.ajax({
url : '/upload',
processData: false,//illega invocation
dataType: 'json',
data: formData,
method: 'POST',
contentType: false,// khong hien o preview
success: function(result){
if(result.success == true)
{
html = '';
html+= '<img src="'+result.path+'" alt="">';
$('#input-file-img').html(html)
$('#input-file-img-hiden').val(result.path)
}
}
})
})
</script>Đoạn script này sẽ rất quen thuộc nếu các bạn đã xem hai bài viết mình có đề cập ở phần đầu tiên nhé.
3, Tạo controller để xử lý upload
Mình sẽ tạo controller có tên là UploadController bằng câu lệnh quen thuộc:
php artisan make:controller UploadControllerSau đó các bạn sẽ vào file UploadController.php để thêm đoạn code sau:
public function upload (Request $request){
$fileName =time().'-'.$_FILES['file']['name'];
$request -> file('file')-> storeAs('public/images',$fileName);
$url = '/storage/images/'.$fileName;
return response() -> json([
'success' => true,
'path' => $url
]);
}
Và đừng quên tạo Route cho em nó
Route::post('/upload',[UploadController::class,'upload']);Nhớ đừng quên thực thi câu lệnh:
php artisan optimize:clearLưu ý, Đặc biệt lưu ý! năn nỷ anh em để ý giúp chỗ này
Sau khi chạy các code trên thì cái ảnh của chúng ta đang nằm ở thư mục
storage\app\public\imagesBây giờ chúng ta cần chuyển qua thư mục
public\storage\imagesCác bạn chạy câu lệnh sau giúp mình
php artisan storage:linkOk, bây giờ các bạn hãy quay ra màn hình và thử upload nhé. Mình tin chắc là sẽ ngon lành cành đào thôi!
4, Một số lưu ý về form của chúng ta trong trường hợp này
<form action="/upload" method="post">
<div id="input-file-img"></div>
<input type="file" id="file">
<input type="hidden" id="input-file-img-hiden">
<button type="summit">Upload </button>
</form>Ok Bài này đến đây thôi, cảm ơn 500 anh em nhé! Hẹn gặp lại.
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
