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