在yii2 activeform中上傳圖片

Question

我需要在項目文件夾中上傳帶有本地副本的簡單圖像：web / uploads / project + project_id + random_unique_key。 我已經嘗試過使用此代碼，但是我想兩個提交按鈕之間存在沖突，我只希望第一個調用actionUpload（）檢查所選文件是否為圖像，然后給我一個成功/錯誤消息，第二個調用actionCreate （）將模型保存在數據庫中。 我的問題是，單擊第二個按鈕不執行任何操作，然后單擊第一個按鈕給出錯誤“圖像不能為空白”。

視圖/項目/創建

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

<?= $form->field($model, 'link')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'image')->fileInput() ?>

<button>Upload</button>

<br></br>

<?= $form->field($model, 'is_deleted')->checkbox() ?>

<div class="form-group">
    <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>

<?php ActiveForm::end(); ?>

項目控制器

public function actionUpload()
{
    $model = new Project();

    if (Yii::$app->request->isPost) {
        $model->image = UploadedFile::getInstance($model, 'image');

        if ($model->validate()) {
            $model->image->saveAs('uploads/' . $model->image->baseName . '.' . $model->image->extension);
        }
    }

    return $this->render('upload', ['model' => $model]);
}

public function actionCreate()
{
    $model = new Project();

    if ($model->load(Yii::$app->request->post())){
        $model->setCreated_at();
        if($model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        }
    }

    return $this->render('create', [
        'model' => $model,
    ]);
}

項目（型號）

public function rules()
{
    return [
        [['title', 'description', 'link', 'image', 'is_deleted'], 'required'],
        [['created_at'], 'safe'],
        [['is_deleted'], 'boolean'],
        [['title', 'description', 'link', 'image'], 'string', 'max' => 255],
    ];
}

提前致謝。

Answer 1

我認為，在這種情況下，您的表單沒有將文件發送到服務器。 將enctype選項添加到表單：

<?php $form = ActiveForm::begin([
    'options' => ['enctype' => 'multipart/form-data'],
]); ?>

Answer 2

單擊按鈕發出AJAX請求（可以使用Jquery）

$('form button').on('click', function(event){
    event.preventDefault();
    var form = document.forms[0];
    var formData = new FormData(form);

    if(formData.get('Project[image]')){ 
        $.ajax({
            method: "POST",
            url: '/upload',
            data: formData,
            success: function(error){
                if(error){
                     $(form).yiiActiveForm('updateAttribute', 'project-image', [error]);
                }
            }
        });
    }
})'

控制者

public function actionUpload()
{
    $model = new Project();

    if (Yii::$app->request->isAjax) {
        $model->image = UploadedFile::getInstance($model, 'image');

        if ($model->validate('image')) {
            $model->image->saveAs('uploads/' . $model->image->baseName . '.' . $model->image->extension);
        }
    }

    return $model->getFirstError('image');
}

規則

public function rules()
{
    return [
        [['title', 'description', 'link', 'is_deleted'], 'required'],
        [['created_at'], 'safe'],
        [['is_deleted'], 'boolean'],
        [['title', 'description', 'link'], 'string', 'max' => 255],
        [['image'], 'file', 'extensions' => 'png, jpg'],
    ];
}

如果您不想編寫自己的js來初始化ajax請求，則可以安裝Kartik File Input小部件。

例：

$form->field($model, 'image')->widget(FileInput::class,[
            'options' => [
                'accept' => 'image/*',
            ],
            'pluginOptions' => [
                'layoutTemplates' => [
                    'main1' =>'{preview}' .
                        '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>' .
                        '<div class="input-group {class}">' .
                        '  {caption}' .
                        '  <div class="input-group-btn">' .
                        '    {upload}' .
                        '    {browse}' .
                        '  </div>' .
                        '</div>',
                    'main2' => '{preview}<div class="kv-upload-progress hide"></div>{upload}{browse}',
                ],
                'uploadUrl' => Url::to(['/upload']),
                'maxFileCount' => 1,
                'autoReplace' => true,
                'showPreview' => false,
                'showCaption' => true,
                'showRemove' => false,
                'showUpload' => true,
            ]
        ])

它將為您注冊所有js代碼以制作ajax。