بارگذاری پرونده لاراول با مثال نوار پیشرفت

در این پست ، ما یاد خواهیم گرفت که چگونه آپلود تصویر AJAX با نوار پیشرفت در برنامه Laravel. بارگذاری پرونده لاراول با نوار پیشرفت
شما همیشه بارگذاری پرونده را به روشی عادی انجام می دهید ، و می توانید به راحتی این کار را انجام دهید. اما وقتی مقدار زیادی از اندازه پرونده دارید ، بارگذاری روی سرور زمان لازم است. شاید شما نتوانید زمان بارگذاری یک فایل یا تصویر را کاهش دهید ، اما می توانید یک نوار پیشرفت را با درصد نمایش دهید تا مشتری بتواند درک کند که چقدر زمان برای بارگذاری یک پرونده باقی مانده است.
در این آموزش ، ما دو مسیر با پرونده کنترلر FileController ایجاد خواهیم کرد. هنگامی که روی دکمه Submit کلیک می کنید ، روش jQuery Ajax را آتش بزنید و بارگذاری تصویر یک نوار پیشرفت را به شما نشان می دهد. بیایید مراحل زیر را برای انجام این مثال دنبال کنیم.
بارگذاری پرونده لاراول با مثال نوار پیشرفت
مرحله 1: Laravel 12 را نصب کنید
اول از همه ، ما باید با استفاده از دستور زیر یک برنامه نسخه Laravel 11 تازه دریافت کنیم زیرا از ابتدا شروع می کنیم. بنابراین ، ترمینال یا فرمان خود را باز کنید و دستور زیر را اجرا کنید:
composer create-project laravel/laravel example-app
مرحله 2: مسیرها را ایجاد کنید
در مرحله اول ، دو مسیر جدید را اضافه خواهیم کرد. یکی برای نمایش نمای ، و ما کد jQuery را در فایل مشاهده خواهیم نوشت. در مرحله دوم ، ما یک مسیر پست برای بارگذاری پرونده ایجاد خواهیم کرد.
مسیرها/web.php
group(function(){
Route::get('file-upload', 'index');
Route::post('file-upload', 'store')->name('file.upload');
});
همچنین بخوانید: Laravel 12 File Blade را با استفاده از مثال فرمان ایجاد کنید
مرحله 3: ایجاد FileController
در مرحله دوم ، ما باید کنترلر FileController را با روش های شاخص () و ذخیره () ایجاد کنیم. شما باید یک پوشه “پرونده ها” را در پوشه عمومی ایجاد کنید. ما همه پرونده ها را در آن پوشه ذخیره خواهیم کرد. فقط یک کنترلر جدید ایجاد کنید و کد را در زیر قرار دهید:
app/http/controllers/filecontroller.php
validate([
'file' => 'required',
]);
$fileName = time().'.'.$request->file->getClientOriginalExtension();
$request->file->move(public_path('files'), $fileName);
return response()->json(['success' => 'You have successfully upload file.']);
}
}
مرحله 4: فایل تیغه ایجاد کنید
در این مرحله آخر ، ما باید پرونده FileUpload.blade.php را ایجاد کنیم و کد را برای jQuery بنویسیم تا نوار پیشرفت را به شما نشان دهد. بنابراین ، شما به سادگی باید کد زیر را در مسیر زیر اضافه کنید:
آموزش های کامل را از devscripttschool بخوانید