Laravel 8 Ajax 이미지 업로드 예제
14880 단어 laravelajaxjavascript
이번 포스팅에서는 ajax를 사용하여 라라벨 8에서 이미지를 업로드하는 방법에 대한 예시를 공유하겠습니다. 이전 게시물에서 Laravel image upload without ajax에 대해 포스팅했습니다. 이제 서버에 요청을 제출한 후 페이지를 다시 로드할 필요가 없도록 ajax 기능을 수행해 보겠습니다.
짧게 만들려면 Laravel image upload에 대한 이전 튜토리얼을 사용한 다음 ajax를 통합하십시오.
좋아, 시작하자 나는 당신이 이미 나의 이전 튜토리얼을 따랐다고 가정합니다.
1단계: Laravel Ajax 이미지 업로드를 위한 컨트롤러 코드 업데이트
아래 코드는 Laravel ajax 이미지 업로드를 지원하기 위해 업데이트된 코드입니다.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests\ImageUploadRequest;
class ImageUploadController extends Controller
{
public function index()
{
return view('image-upload.index');
}
public function upload(ImageUploadRequest $request)
{
$filename = time() . '.' . $request->image->extension();
$request->image->move(public_path('images'), $filename);
// save uploaded image filename here to your database
return response()->json([
'message' => 'Image uploaded successfully.',
'image' => 'images/' . $filename
], 200);
}
}
2단계: 보기 업데이트
이제 Ajax 기능을 지원하도록 보기 코드를 업데이트하겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel 8 Image Upload Example - codeanddeploy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.error {
color: red
}
#image {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#laravel-image-upload').on('submit', function(event){
event.preventDefault();
var url = $('#laravel-image-upload').attr('data-action');
$.ajax({
url: url,
method: 'POST',
data: new FormData(this),
dataType: 'JSON',
contentType: false,
cache: false,
processData: false,
success:function(response)
{
$('#image').attr('src', response.image).show();
alert(response.message)
},
error: function(response) {
$('.error').remove();
$.each(response.responseJSON.errors, function(k, v) {
$('[name=\"image\"]').after('<p class="error">'+v[0]+'</p>');
});
}
});
});
});
</script>
</head>
<body>
<div class="container mt-5">
<img width="200px" id="image">
<form data-action="{{ route('image-upload.post') }}" method="POST" enctype="multipart/form-data" id="laravel-image-upload">
@csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</body>
</html>
이제 ajax를 사용하여 Laravel 8 이미지 업로드를 수행하는 방법을 이미 알고 있습니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/laravel/laravel-8-ajax-image-upload-example를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Laravel 8 Ajax 이미지 업로드 예제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/laravel-8-ajax-image-upload-example-5bc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
