Yii2 从模态问题上传图片

Question

我正在使用 yii2 bootstrap 模式上传图片，问题是我需要双击“创建”按钮然后表单提交才有效，否则单击它不起作用。双击图片正在上传，表单数据也保存到数据库。

我的代码有问题吗？

代码如下：

//表格

<?php Pjax::begin(['id' => 'banner-form']) ?>
<?php $form = ActiveForm::begin([
    'id' => 'banner-form', 
    'options' => [
    'data-pjax' => true,
    'enctype' => 'multipart/form-data'
    ]
    ]); 
?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'banner')
->fileInput([
"accept"=>"image/*"
]) 
?>

<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

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

//型号

[['banner'], 'file', 'skipOnEmpty' => false, 
                     'extensions' => ['jpg', 'jpeg', 'png', 'gif']
        ]

//index.php

<p>
 <?= Html::a(Yii::t('app', 'Create Banner'), null, ['class' => 'btn btn-success', 'id'=>'createBannerButton', 
           'value'=>Url::to(['/banner/create'])]) ?>
</p>

<?php Pjax::begin(['id' => 'banner-index']) ?>
<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,

       ....

 ]); ?>
<?php Pjax::end(); ?>

//控制器

use yii\web\UploadedFile;

class BannerController extends Controller
{
 ...
    public function actionCreate()
    {
        $model = new Banner();

        if ($model->load(Yii::$app->request->post())){

        $file = UploadedFile::getInstance($model, 'banner');
            if (!empty($file))
                $model->banner = $file;
         if($model->save()){
            if (!empty($file))
              $file->saveAs( Yii::getAlias('@root') .'/uploads/' . $file);

            return $this->redirect(['view', 'id' => $model->id]);
         }
        }
        else if (Yii::$app->request->isAjax) {
             return $this->renderAjax('create', [
                'model' => $model,
            ]);
        }
        else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }
   ...
}

//layouts/main.php

<?php 

Modal::begin([
        'header' => '',
        'id' => 'modal',
        'size' => 'modal-medium', //medium
         'clientOptions' => ['backdrop' => 'static', 'keyboard' => false]
      ]);

  echo "<div id='modalContentBackend'>
        <div class='col-lg'>
          <img src='/images/loading.gif' width='280' height='210' alt='loading...'>
        </div>
        </di>";

Modal::end();
?>
<?php $this->endBody() ?>

//backend/web/js/custom.js

$(function(){
    $("#createBannerButton").click(function(){
        $("#modal").modal('show')
                   .find('#modalContentBackend')
                   .load($(this).attr('value'));
    });
});

//backend/assets/AppAsset

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/custom.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

Answer 1

我遇到了问题，我将 Pjax::begin() 包括在 index.php 和 _form.php 中，我已经从 _form.php 中删除了 Pjax::begin()，现在是工作正常。

Yii2 从模态问题上传图片

Yii2 upload image from modal issue

yii2

yii2-advanced-app