آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
آموزش نصب لاراول 5.8 به همراه تنظیمات اولیه
3 فروردین 1398
17 تا از بهترین پکیج های لاراول برای بهینه سازی برنامه ها در سال 2019
9 فروردین 1398
آپلود چندین عکس با Dropzone در لاراول 5.8 ، با استفاده از کتابخانه Dropzone JS ، کاربر می تواند با کشیدن و رها کردن (drag and drop) فایل بر روی آن، فایل را به کمک AJAX در سرور آپلود نماید. Dropzone معروفترین کتابخانه رایگان و open source برای آپلود چندین تصویر با هم می باشد.در این مقاله از تجاری اپ ما قصد داریم نحوه ی کار با کتابخانه Dropzone در لاراول را به شما آموزش دهیم. با ما همراه باشید.
سرفصل های آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
گام 1: نصب و پیکربندی ابتدایی لاراول
برای هر پروژه لاراول ما نیاز داریم که لاراول را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه لاراول آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه
گام 2: ایجاد جدول
ما می خواهیم تصاویر آپلود شده را در پایگاه داده ذخیره می کنیم. بنابراین ما به یک جدول مثلا با نام ‘image_uploads’ نیاز داریم. برای ساختن فایل migration دستور زیر را اجرا کنید:
php artisan make:migration create_image_uploads_table –create=image_uploads
ما با موفقیت فایل migration را برای جدول “image_uploads” ایجاد کردیم. حالا فایل migration مربوطه را از پوشه “database / migrations” باز کنید و کدهای زیر را در آن بنویسید:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateImageUploadsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('image_uploads', function (Blueprint $table) {
$table->bigIncrements('id');
$table->text('filename');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('image_uploads');
}
}
حالا دستور artisan زیر را اجرا کنید تا جدول image_uploads در پایگاه داده شما ساخته شود:
php artisan migrate
اگر به phpMyAdmin بروید ، جدول ‘image_uploads’ را مشاهده خواهید کرد.
گام 3: ایجاد کنترلر و مدل
ما به یک کنترلر و مدل برای این پروژه نیاز داریم با اجرای دستور زیر کنترلر و مدل خود را ایجاد کنید:
php artisan make:controller ImageUploadController –model=ImageUpload
فایل کنترلر خود را از مسیر Http / Controllers / ImageUploadController.php باز کنید و کدهای زیر را در آن بنویسید:
<?php
namespace App\Http\Controllers;
use App\ImageUpload;
use Illuminate\Http\Request;
class ImageUploadController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('image_upload');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$image = $request->file('file');
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'), $imageName);
$imageUpload = new ImageUpload;
$imageUpload->filename = $imageName;
$imageUpload->save();
return response()->json(['success' => $imageName]);
}
/**
* Remove the specified resource from storage.
*
* @param \App\ImageUpload $imageUpload
* @return \Illuminate\Http\Response
*/
public function delete(Request $request)
{
$filename = $request->get('filename');
ImageUpload::where('filename', $filename)->delete();
$path = public_path() . '/images/' . $filename;
if (file_exists($path)) {
unlink($path);
}
return $filename;
}
}
ما با موفقیت مدل و کنترل کننده را ایجاد کردیم.
گام 4: ایجاد Route
فایل web.php را در مسیر “routes/web.php” باز کنید و Route های زیر را ایجاد کنید.
<?php
Route::get('/', function () {
return view('welcome');
});
Route::get('upload', 'ImageUploadController@index');
Route::post('upload/store', 'ImageUploadController@store');
Route::post('delete', 'ImageUploadController@delete');
گام 5: ایجاد فایل Blade
به پوشه resources / views بروید و یک فایل Blade با نام ‘image_upload.blade.php’ برای آپلود تصویر ایجاد کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<title>آموزش آپلود چندگانه عکس با DropzoneJS در لاراول 5.8</title>
<meta name="_token" content="{{csrf_token()}}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
</head>
<body style="direction: rtl;">
<div class="container">
<h3 class="text-center" style="margin-top: 50px;">آموزش آپلود چندگانه عکس با DropzoneJS در لاراول 5.8 از سایت تجاری اپ</h3><br>
<form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 12,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 50000,
removedfile: function (file) {
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("delete") }}',
data: {filename: name},
success: function (data) {
console.log("File has been successfully removed!!");
},
error: function (e) {
console.log(e);
}
});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
</body>
</html>
گام 6: خروجی نهایی آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
پروژه ما آماده اجرا است.برای اجرای پروژه آدرس http://myproject/upload را در مرورگر خود وارد کنید و صفحه آپلود چندین تصویر با Dropzone را مشاهده نمایید و سپس چندین تصویر را آپلود کنید. تصاویر در پایگاه داده ذخیره خواهند شد. ما می توانیم فایل ها را علاوه بر ذخیره سازی در پایگاه داده با کلیک روی دکمه حذف ، تصاویر را از پایگاه داده و پوشه مربوط به آپلودها حذف کنیم. تصویر زیر خروجی پروژه ما می باشد:
