امروز:چهارشنبه ,۱۳۹۸/۰۴/۰۵
Download http://bigtheme.net/joomla Free Templates Joomla! 3
Home / Yii2 / yii2 jquery upload file

yii2 jquery upload file

در قسمت های قبل آپلود فایل رو آموزش دادیم
در این مطلب قصد آموزش آپلود فایل با استفاده از jQuery رو خواهیم داشت که ظاهر شکیلتری داره برای مشاهده ی آن به لینک زیر مراجعه کنید :
jQuery File Upload Demo
خوب برای نصب باید ابتدا با دستور زیر در کامپوزر فایل ها رو دریافت نماییم :

$ composer require 2amigos/yii2-file-upload-widget:~1.0

یا کد زیر در فایل composer.json در قسمت require

"۲amigos/yii2-file-upload-widget": "~1.0"

پس از نصب برای استفاده از کد زیر برای نمایش آن در فورم خود استفاده می کنیم

<?=
    FileUploadUI::widget([
        'model' => $model,
        'attribute' => 'imageFile',
        'url' => ['weight/imageupload', 'id' => $model->id],
        'gallery' => false,
        'fieldOptions' => [
            'accept' => 'image/*'
        ],
        'clientOptions' => [
            'maxFileSize' => 2000000
        ],
        // ...
        'clientEvents' => [
            'fileuploaddone' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
            'fileuploadfail' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
        ],
    ]);
    ?>

توجه داشته باشین که weight/imageupload مسیر اکشن آپلود فایل در کنترلرمون می باشد
همچنین یک اکشن برای حذف فایل با نام Imagedelete

خوب برای عملیات آپلود وحذف در کنترلر
اکشن imageupload

public function actionImageupload() {
        $model = new Weight();
        $imageFile = UploadedFile::getInstance($model, 'imageFile');
        $directory =Yii::$app->basePath . \Yii::$app->params['path']['weight'] . DIRECTORY_SEPARATOR . Yii::$app->session->id . DIRECTORY_SEPARATOR;
        if (!is_dir($directory)) {
            mkdir($directory);
        }
        if ($imageFile) {
            $uid = uniqid(time(), true);
            $fileName = $uid . '.' . $imageFile->extension;
            $filePath = $directory . $fileName;
            if ($imageFile->saveAs($filePath)) {
                $path = \Yii::$app->params['path']['weight'] . Yii::$app->session->id . DIRECTORY_SEPARATOR . $fileName;
                return Json::encode([
                            'files' => [[
                            'name' => $fileName,
                            'size' =>'150', $imageFile->size,
                            "url" => $path,
                            "thumbnailUrl" => $path,
                            "deleteUrl" => 'imagedelete?name=' . $fileName,
                            "deleteType" => "POST"
                                ]]
                ]);
            }
        }
        return '';
    }

و برای حذف
Imagedelete


public function actionImagedelete($name) {
        $directory = Yii::$app->basePath . \Yii::$app->params['path']['weight'] . DIRECTORY_SEPARATOR . Yii::$app->session->id;
        if (is_file($directory . DIRECTORY_SEPARATOR . $name)) {
            unlink($directory . DIRECTORY_SEPARATOR . $name);
        }
        $files = FileHelper::findFiles($directory);
        $output = [];
        foreach ($files as $file) {
            $path = Yii::$app->basePath . \Yii::$app->params['path']['weight'] . Yii::$app->session->id . DIRECTORY_SEPARATOR . basename($file);
            $output['files'][] = [
                'name' => basename($file),
                'size' => filesize($file),
                "url" => $path,
                "thumbnailUrl" => $path,
                "deleteUrl" => 'imagedelete?name=' . basename($file),
                "deleteType" => "POST"
            ];
        }
        return Json::encode($output);
    }

نکته این که

Yii::$app->basePath . \Yii::$app->params['path']['weight']

مسیر ذخیره سازی تصویر من می باشد : web/uploads/weight
منبع اصلی این اکستنشن

BlueImp File Upload Widget for Yii2

Check Also

DropDown for pageSize in GridView

DropDown for pageSize in GridView برای نمایش تعداد آیتمی که در Gridview  نمایش داده می …

پاسخ دهید

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