Saya akan menunjukkan kepada Anda contoh jquery ajax upload gambar laravel 7. Tutorial ini akan memberi Anda contoh sederhana laravel 7 - tutorial upload gambar dengan ajax validasi. Kami akan menggunakan laravel 7 ajax unggah gambar posting. Anda akan belajar jquery ajax upload gambar laravel 7.
Laravel menyediakan cara yang sangat sederhana untuk menyimpan gambar itu di server, Laravel juga memberikan validasi untuk ukuran file maks, gambar, tipe mime dll. Jadi, jika kita membuat upload gambar menggunakan jquery ajax maka itu menjadi baik untuk GUI kita dan yang terbaik. Jadi hari ini di posting ini kita akan belajar cara mengunggah gambar menggunakan jquery ajax. Dalam contoh ini saya menggunakan FormJS untuk api Ajax dengan cara itu kita bisa menggunakan validasi laravel dan juga mencetak pesan kesalahan laravel.
Di sini saya memberi Anda contoh lengkap dari unggah gambar ajax langkah demi langkah seperti membuat proyek laravel, migrasi, model, rute, file pisau dll. Jadi Anda harus mengikuti beberapa langkah.
Tidak masalah jika Anda tidak tahu laravel karena ini dari awal. Setelah menyelesaikan contoh ini Anda akan menemukan di bawah ini seperti pratinjau, jadi mari kita mulai.
Langkah 1: Instal Aplikasi Laravel 7
kita akan mulai dari awal, Jadi kita perlu mendapatkan aplikasi Laravel baru menggunakan perintah di bawah ini, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogLangkah 2: Konfigurasi Basis Data
Pada langkah ini, kami perlu membuat konfigurasi basis data, Anda harus menambahkan detail berikut pada file .env Anda.
1. Nama Pengguna Database
1. Kata Sandi Database
1. Nama Database
Dalam file .env juga tersedia rincian host dan port, Anda dapat mengkonfigurasi semua detail seperti di sistem Anda, Jadi Anda dapat menempatkan seperti di bawah ini:
.env
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secretLangkah 3: Buat Tabel dan Model ajax_images
Pada langkah ini kita harus membuat migrasi untuk tabel ajax_images menggunakan perintah Laravel 5.3 php, jadi pertama jalankan perintah di bawah ini:
php artisan make:migration create_ajax_image_tabelSetelah perintah ini, Anda akan menemukan satu file di path database berikut / migrasi dan Anda harus meletakkan kode di bawah ini dalam file migrasi Anda untuk membuat tabel kategori.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateAjaxImageTabel extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('ajax_images', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop("ajax_images");
}
}
Sekarang kita perlu menjalankan migrasi dengan perintah di bawah ini:
php artisan migrateSetelah membuat tabel "ajax_images" Anda harus membuat model AjaxImage untuk kategori. Jadi pertama-tama kita harus menjalankan perintah di bawah ini untuk membuat model AjaxImage:
php artisan make:model AjaxImageSekarang, Anda dapat melihat file baru di path app/AjaxImage.php dan meletakkan konten di bawah ini di file item.php:
app/AjaxImage.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class AjaxImage extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'image'
];
}
Langkah 4: Buat Route
Pada langkah ini kita perlu membuat rute untuk file layout unggah gambar ajax dan satu lagi untuk permintaan posting. jadi buka file routes/web.php Anda dan tambahkan route berikut.
routes/web.php
Route::get('ajaxImageUpload', 'AjaxImageUploadController@ajaxImageUpload');
Route::post('ajaxImageUpload', 'AjaxImageUploadController@ajaxImageUploadPost')->name('ajaxImageUpload');Langkah 5: Buat Controller
Pada titik ini, sekarang kita harus membuat controller baru sebagai AjaxImageUploadController di app/Http/Controllers/AjaxImageUploadController.php . controller ini akan mengelola tata letak dan validasi gambar dengan permintaan posting, Jadi jalankan perintah di bawah ini untuk menghasilkan controller baru:
php artisan make:controller AjaxImageUploadControllerOk, sekarang letakkan konten di bawah ini dalam file controller:
app/Http/Controllers/AjaxImageUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
use App\AjaxImage;
class AjaxImageUploadController extends Controller
{
/**
* Show the application ajaxImageUpload.
*
* @return \Illuminate\Http\Response
*/
public function ajaxImageUpload()
{
return view('ajaxImageUpload');
}
/**
* Show the application ajaxImageUploadPost.
*
* @return \Illuminate\Http\Response
*/
public function ajaxImageUploadPost(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($validator->passes()) {
$input = $request->all();
$input['image'] = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $input['image']);
AjaxImage::create($input);
return response()->json(['success'=>'done']);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
}
Langkah 6: Buat View
Pada langkah Terakhir, mari kita buat ajaxImageUpload.blade.php (resources/views/ajaxImageUpload.blade.php) untuk tata letak dan kami akan menulis kode desain di sini dan juga bentuk untuk unggah gambar ajax, Jadi masukkan kode berikut:
resources/views/ajaxImageUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5 - Ajax Image Uploading Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 5 - Ajax Image Uploading Tutorial</h1>
<form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label>Alt Title:</label>
<input type="text" name="title" class="form-control" placeholder="Add Title">
</div>
<div class="form-group">
<label>Image:</label>
<input type="file" name="image" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-success upload-image" type="submit">Upload Image</button>
</div>
</form>
</div>
<script type="text/javascript">
$("body").on("click",".upload-image",function(e){
$(this).parents("form").ajaxForm(options);
});
var options = {
complete: function(response)
{
if($.isEmptyObject(response.responseJSON.error)){
$("input[name='title']").val('');
alert('Image Upload Successfully.');
}else{
printErrorMsg(response.responseJSON.error);
}
}
};
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
</script>
</body>
</html>
Pastikan Anda harus membuat folder "gambar" di direktori public Anda.
Sekarang kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini begitu cepat:
php artisan serveSekarang Anda dapat membuka URL di bawah ini di browser Anda:
http://localhost:8000/ajaxImageUpload
andriajah