tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
            نصب لاراول 5.8 به همراه تنظیمات اولیه
            آموزش نصب لاراول 5.8 به همراه تنظیمات اولیه
            3 فروردین 1398
            بهترین پکیج های لاراول
            17 تا از بهترین پکیج های لاراول برای بهینه سازی برنامه ها در سال 2019
            9 فروردین 1398
            منتشر شده توسط مدیر سایت
            آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

            آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

            آپلود چندین عکس با Dropzone در لاراول 5.8 ، با استفاده از کتابخانه Dropzone JS ، کاربر می تواند با کشیدن و رها کردن (drag and drop) فایل بر روی آن، فایل را به کمک AJAX در سرور آپلود نماید. Dropzone معروفترین کتابخانه رایگان و open source برای آپلود چندین تصویر با هم می باشد.در این مقاله از تجاری اپ ما قصد داریم نحوه ی کار با کتابخانه Dropzone در لاراول را به شما آموزش دهیم. با ما همراه باشید.

            سرفصل های آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

            1. نصب و پیکربندی ابتدایی لاراول
            2. ایجاد جدول
            3. ایجاد کنترلر و مدل
            4. ایجاد Route
            5. ایجاد فایل Blade
            6. خروجی نهایی

            گام 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 را مشاهده نمایید و سپس چندین تصویر را آپلود کنید. تصاویر در پایگاه داده ذخیره خواهند شد. ما می توانیم فایل ها را علاوه بر ذخیره سازی در پایگاه داده با کلیک روی دکمه حذف ، تصاویر را از پایگاه داده و پوشه مربوط به آپلودها حذف کنیم. تصویر زیر خروجی پروژه ما می باشد:

            آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
            آموزش آپلود چندین عکس با Dropzone در لاراول 5.8
            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج