در قسمت های قبل آپلود فایل رو آموزش دادیم
در این مطلب قصد آموزش آپلود فایل با استفاده از 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