kartik-v/bootstrap-fileinput；扩展没有显示上传所选照片的控件

Question

我遵循了实现文章中所说的一切，但当窗体加载时，它不会显示预览区域和所选的图像，但当包含小部件的视图没有在主布局中呈现(单独呈现)时，它会显示控件，但会附加非常大的图像).here是我所做的：

在控制器中：

​

 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));

​

在视图中

​

<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>

​

​

​

Answer 1

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

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

祝好运。