آپلود چندتایی فایلها بصورت Ajax در لاراول 5
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 4 دقیقه

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

آپلود فایل‌ یکی از مهم‌ترین عملیات ها در محیط وب هست. امروزه سایز فایل‌ها برای آپلود بسیار بزرگ هستند و نیاز به فرآیندی داریم که در پنهان عملیات آپلود رو انجام بده. ما برای این کار 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('/', 'UploadController@uploadForm');

Route::post('/upload', 'UploadController@uploadSubmit');

Route::post('/product', 'UploadController@postProduct');

مسیرهامون شامل یک مسیر خانه, مسیر 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

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
5 از 1 رای

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

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

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