如何向 yii2-widget-fileinput 添加一个按钮？答案

【问题标题】：How add one more button to yii2-widget-fileinput?如何向 yii2-widget-fileinput 添加一个按钮？
【发布时间】：2018-02-06 21:48:14
【问题描述】：

我想要 yii2-fileinput-widget 中的更多按钮。

我现在的代码是这样的：

$allPics = \common\models\Picture::getPictures($album->id);
$images = [];
$imagesOptions = [];
if($allPics){
    foreach ($allPics as $pic){
         $key = $pic->id;
         $url = Url::to(['set-pic-status', 'id'=>$key, 'pid'=>$model->id, 'do'=>'remove']);
         $images[] = Yii::$app->urlManagerFront->createAbsoluteUrl(['image/index', 'id'=>$pic->id, 'width'=>300, 'height'=>300]);
         $imagesOptions[] = ['caption' => $pic->name, 'size' => $pic->size , 'url'=>$url, 'key'=>$key];
    }
} 
echo FileInput::widget([
     'name' => 'pic',
     'language'=>'fa',
     'options'=>[
         'multiple'=>true
     ],
     'pluginOptions' => [
         'uploadUrl' => Url::to(['pic-upload', 'id'=>$model->id]),
         'initialPreview'=>$images,
         'initialPreviewAsData'=>true,
         'initialCaption'=>"تصاویر محصول",
         'initialPreviewConfig' => $imagesOptions,
         'overwriteInitial'=>false,
         'maxFileSize'=>2800,
     ]
]);

顶部代码的结果是：

现在我需要在删除按钮附近再添加一个按钮来向服务器发送一些数据并将所选图片设置为封面或更改数据库中图片的状态。

我该怎么做？

【问题讨论】：

您查看过 Kartik- 的网站吗？也许那里有什么东西。
@EdvinTenovimas 是的，我做到了。我发现了一些东西，但它的文档不清楚。

标签： file-upload yii2 yii2-widget

【解决方案1】：

试试这个：

$initialPreview = [];
$initialPreviewConfig = [];
foreach($model->images as  $image){
$initialPreview[] = Html::img($image->imagePath,['width' =>200]);
$initialPreviewConfig[] = [
    'url' => \yii\helpers\Url::to(['/admin/portfolio/portfolio/image-delete']),
    'key' => $image->ID,

];
}

?>
<br>
<div class="row">
    <div class="col-md-12">
        <?php
        echo FileInput::widget([
            'name' => 'ProductImages[]',
            'options'=>['accept'=>'image/*','multiple' => true],
            'pluginOptions' => [
                'otherActionButtons' => '<button class="set-main" type="button" {dataKey} ><i class="glyphicon glyphicon-star"></i></button>',
                'overwriteInitial'=>false,
                'maxFileSize'=>2800,
                'fileActionSettings' => [
                    'fileActionSettings' => [
                        'showZoom' => false,
                        'showDelete' => true,
                    ],
                ],
                'browseClass' => 'btn btn-success',
                'uploadClass' => 'btn btn-info',
                'removeClass' => 'btn btn-danger',
                'showRemove' => false,
                'showUpload' => false,
                'initialPreview' => $initialPreview,
                'initialPreviewConfig' => $initialPreviewConfig,

            ],

        ]);
        $this->registerJs("
    
            $('.set-main').on('click',function(){
                $.get('" . \yii\helpers\Url::to(['/admin/portfolio/portfolio/set-main-image/']) . "', {id:$(this).attr('data-key')});
                
                });
    ");
        ?>

    </div></div>
<div>

'otherActionButtons' => '...';

【讨论】：