آپلود چندتایی فایلها بصورت Ajax در لاراول 5

13 خرداد 1398, خواندن در 4 دقیقه

آپلود فایل‌ یکی از مهم‌ترین عملیات ها در محیط وب هست. امروزه سایز فایل‌ها برای آپلود بسیار بزرگ هستند و نیاز به فرآیندی داریم که در پنهان عملیات آپلود رو انجام بده. ما برای این کار Ajax رو پیشنهاد میدیم و در ادامه یک پروژه کوچک در این مورد خواهیم داشت.

چیزی که میخوایم اینه که چند عکس آپلود کنیم و فرایند آپلود رو ببینیم در نهایت فرم رو ثبت کنیم.

برای این کار از پلاگین جی کوئری به نام Jquery File Upload و فریمورک لاراول 5 استفاده می کنیم.

قدم اول) ساختار دیتابیس
برای ساخت دیتابیس یا میتونید بصورت مستقیم از PhpMyAdmin استفاده کنید یا اینکه فایل Migration زیر رو بسازید و از این طریق دیتابیس رو طراحی کنید – که ما راه دوم رو پیشنهاد می‌کنیم :


Schema::create('products', function (Blueprint $table) {

    $table->increments('id');

    $table->string('name');

    $table->timestamps();

});



Schema::create('product_photos', function (Blueprint $table) {

    $table->increments('id');

    $table->integer('product_id')->unsigned()->nullable();

    $table->foreign('product_id')->references('id')->on('products');

    $table->string('filename');

    $table->timestamps();

});



برای دو جدول بالا دو مدل ساده به صورت زیر داریم :

app/Product.php 



class Product extends Model

{

    protected $fillable = ['name'];

}



app/ProductPhoto.php



class ProductPhoto extends Model

{

    protected $fillable = ['product_id', 'filename'];



    public function product()

    {

        return $this->belongsTo('App\Product');

    }

}

همونطور که مشاهده کردید فیلد product_photos.product_id بصورت Nullable تعریف شده یعنی ما میتونیم تصاویر رو آپلود کنیم بدون اینکه محصولات رو ذخیره کنیم – در این مورد بعداً بیشتر صحبت می کنیم.

قدم دوم) مسیر ها و MVC

حالا نوبت مسیریابی میرسه , پس در مسیر routes/web.php کدهامون رو قرار میدیم

Route::get('/', '[email protected]');

Route::post('/upload', '[email protected]');

Route::post('/product', '[email protected]');

مسیرهامون شامل یک مسیر خانه, مسیر upload برای ثبت Ajax فرممون و درنهایت مسیر product برای ثبت محصول بهمراه تصاویرش هست.حالا برای کنترلر app/Http/Controllers/UploadController.php متد های زیر رو اضافه می‌کنیمقدم سوم)

ساخت فرم


public function uploadForm()

{

    return view('upload_form');

}



public function uploadSubmit(Request $request)

{

    // This method will cover file upload

}



public function postProduct(Request $request)

{

    // This method will cover whole product submit

}

برای view کدهای زیر رو وارد می‌کنیم که شامل یک فرم با متد post و مسیری که درنظر گرفته بودیم هست به input با آیدی fileupload دقت کنید.


<form action="/product" method="post">

    {{ csrf_field() }}

    Product name:

    <br />

    <input type="text" name="name" />

    <br /><br />

    Product photos (can add more than one):

    <br />

    <input type="file" id="fileupload" name="photos[]" data-url="/upload" multiple />

    <br />

    <div id="files_list"></div>

    <p id="loading"></p>

    <input type="hidden" name="file_ids" id="file_ids" value="" />

    <input type="submit" value="Upload" />

</form>

قدم چهارم) فرآیند آپلود و ثبت

حالا پلاگین جی کوئری jQuery-File-Upload library رو دانلود کنید و محتوای فولدر js رو در مسیر /public/js پروژه قرار بدید, حالا میتونیم ازش بصورت زیر استفاده کنیم:

در انتهای فایل upload_form.blade.php این کد رو اضافه کنید :
 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="/js/vendor/jquery.ui.widget.js"></script>

<script src="/js/jquery.iframe-transport.js"></script>

<script src="/js/jquery.fileupload.js"></script>

<script>

    $(function () {

        $('#fileupload').fileupload({

            dataType: 'json',

            add: function (e, data) {

                $('#loading').text('Uploading...');

                data.submit();

            },

            done: function (e, data) {

                $.each(data.result.files, function (index, file) {

                    $('<p/>').html(file.name + ' (' + file.size + ' KB)').appendTo($('#files_list'));

                    if ($('#file_ids').val() != '') {

                        $('#file_ids').val($('#file_ids').val() + ',');

                    }

                    $('#file_ids').val($('#file_ids').val() + file.fileID);

                });

                $('#loading').text('');

            }

        });

    });

</script>

توضیحات کد بالا :

  • تابع ()fileupload به input آپلود فایلمون متصل شده و دو پارامتر مهم data-url و name رو میگیره .
  • این پارامتر ها به مسیر upload/ ارسال می‌شوند – درحقیقت به تابع ()uploadSubmit
  • در کنترلر UploadController .
  • تابع  ()uploadSubmit بصورت فیزیکی تصاویر رو آپلود میکنه و اطلاعات رو در دیتابیس قرار میده اما فیلد product_photos.product_id رو پر نمیکنه چون هنوز id رو نداریم. بعد از عملیات آپلود خروجی رو بصورت JSON برمیگردونه.
public function uploadSubmit(Request $request)

{

    $photos = [];

    foreach ($request->photos as $photo) {

        $filename = $photo->store('photos');

        $product_photo = ProductPhoto::create([

            'filename' => $filename

        ]);



        $photo_object = new \stdClass();

        $photo_object->name = str_replace('photos/', '',$photo->getClientOriginalName());

        $photo_object->size = round(Storage::size($filename) / 1024, 2);

        $photo_object->fileID = $product_photo->id;

        $photos[] = $photo_object;

    }



    return response()->json(array('files' => $photos), 200);



}
  • این خروجی ها بصورت لیستی به کاربران نمایش داده می‌شوند (شامل نام و سایز فایل) و همچنین در فیلد پنهان file_ids که مقادیر رو از product_photos.id ذخیره میکنه.

تا زمانی که دکمه ثبت رو بزنیم ما میتونیم فایل جدید آپلود کنیم و به لیست فایل‌هامون اضافه کنیم. به محض اینکه دکمه ثبت زده شد اطلاعات پست میشه و تابع ()postProduct اطلاعات رو در جدول products ذخیره میکنه و همچنین id محصول جدید رو در جدول product_photos وارد میکنه :

public function postProduct(Request $request)

{

    $product = Product::create($request->all());

    ProductPhoto::whereIn('id', explode(",", $request->file_ids))

        ->update(['product_id' => $product->id]);

    return 'Product saved successfully';

}

منبع : laraveldaily

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
امیررضا سیستانه ای @reza.sys
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو