kartik -v / bootstrap-fileinput;扩展程序未显示控件以上传所选照片

Question

我按照实现文章中的所有内容进行操作，但是在加载表单时，它不显示预览区域和所选图像，但是当包含窗口小部件的视图未在主布局中呈现时（单独呈现）它显示控制，但非常大，图像附加）。我做了什么：

在控制器中：

＆＃13;

＆＃13;

 public function actionProfilephoto($user_id,$titre=null){

 $model = \Yii::createObject(Profile::className());
 $model->scenario='photo';
 if(\Yii::$app->request->post() && $titre==null){
     $model=\Yii::$app->request->post('uploadExtraData')['user_id'];
     $model->photo = UploadedFile::getInstance($model, 'photo');
     \Yii::$app->response->format = Response::FORMAT_JSON;
     if($model->validate()){
        $reponses[]= $model->upload();
          if($reponses['error']==true){
             $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . $reponses['erreur'] ; 
          }
     }else{
         $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . implode(' ',$model->errors) ; 
     }
      $reponse['initialPreview'] = '<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">';
      $reponse['initialPreviewConfig']=['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),
                'width'=>'90px','url'=>\Yii::$app->urlManager->createUrl(['utilisateur/deletephoto'])];
      echo json_encode($reponse);
        \Yii::$app->end();
 }
return $this->render('profilephoto',array('model'=>$model,'titre'=>false,'ajax'=>false));

＆＃13;

＆＃13;

＆＃13;

在视图中

＆＃13;

＆＃13;

<div id="okp" class="panel panel-default center-block">
            <?php if($titre==true){
             echo '<p class="well-sm">';
           $this->render('/_alert', ['module' => $module,]);
            echo '</p>';}?>
            
            <h3 class="panel-title panel-heading text-center" style="margin-bottom:5px;"><strong><?= Html::encode($this->title)?></strong></h3>
<?php $form = ActiveForm::begin([
                     'id'=> 'profile-form',
                    'enableAjaxValidation'   => true,
                    'enableClientValidation' => false
                ,'options'=>['class'=>'well-sm',
                    'enctype'=>'multipart/form-data']]); ?>
<?=FileInput::widget([
    'name' => 'photo',
    'language'=>\Yii::$app->language,
    'pluginOptions' => [
        'uploadUrl'=>\Yii::$app->urlManager->createUrl(['settings/profilephoto']),
        'initialPreview'=> ['<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">'],
        'initialPreviewConfig'=> ['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),
                    'width'=>'90px',
        'url'=>\Yii::$app->urlManager->createUrl(['settings/deletephoto']),
        ],
        'uploadExtraData'=>['user_id'=>$model->user_id],
        'image'=>['width'=>'90px','height'=>'90px'],
        'allowedPreviewTypes'=>['image'],
        'allowedFileExtensions'=>['gif','png','jpeg','jpg'],
        'allowedFileTypes'=>['image'],
        'maxFileSize'=>'3072',
        'maxFileCount'=>'1',
        'validateInitialCount'=>true,
        'resizeImage'=>true,
        'maxImageWidth'=> 90,
        'maxImageHeight'=>90,
        'resizePreference'=>'width',
        'browseClass' => 'btn btn-success',
        'uploadClass' => 'btn btn-info',
        'removeClass' => 'btn btn-danger',
        'uploadIcon'=>'<i class="glyphicon glyphicon-upload"></i> ',
        'removeIcon' => '<i class="glyphicon glyphicon-trash"></i> ',
        'browseIcon' => '<i class="glyphicon glyphicon-camera"></i> ',
        'browseLabel' =>  \Yii::t('app','Select Photo')
    ],
    'options' => ['accept' => 'image/*']
]);
?></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我也遇到了这个问题，并通过停止从Yii2呈现此文件来解决它：

“bootstrap-fileinput.js”，删除它，js冲突将消失，所有活动都将正常工作。

祝你好运。