0

朋友们好日子！

给定下一个任务。我需要将 Kartik 的 FileInput 的新字段添加到 ActiveRecord 的当前呈现形式中。

我做了下一个方法。

控制器的作用：

public function actionCreate()
    {
        $model = new Slider();
        $uploadingForm = new UploadingForm();

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

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

_形式：

<?php

use yii\helpers\Html;
use yii\bootstrap4\ActiveForm;
use kartik\file\FileInput;
use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $model app\models\Slider */
/* @var $form yii\bootstrap4\ActiveForm */
/* @var $uploadingForm app\models\UploadingForm */
/* @var $collectionFileArray this is a collection of a current slider represented as an array of paths  */
?>
<div class="slider-form">

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

    <?= $form->field($model, 'where')->dropDownList(
        $model::associatedArrayOfLocations()
    ) ?>

    <?= $form->field($model, 'status')->radioList([
        $model::STATUS_OFF => 'Swithed off',
        $model::STATUS_ON => 'Switched on',
    ], [
        'item' => function($index, $label, $name, $checked, $value) {
            $item = Html::beginTag('div', ['class' => 'custom-control custom-radio']);
            $item .= Html::radio($name, $checked, ['id' => 'article-status-'.$index, 'value' => $value, 'class' => 'custom-control-input']);
            $item .= Html::label($label, 'article-status-'.$index, ['class' => 'custom-control-label']);
            $item .= Html::endTag('div');
            return $item;
        },
    ])->hint('Default "Switch On"') ?>

    <?= $form->field($uploadingForm, 'imageFiles[]')->widget(FileInput::class, [
        'options' => ['id' => 'foo', 'accept' => 'image/*'],
        'pluginOptions' => [
            'initialPreview' => $collectionFileArray ?? '',
            'initialPreviewAsData' => true,
            'fileActionSettings' => [
                'showZoom' => false,
                'showRemove' => false,
            ],
            'showCaption' => true, // show an input where we show the name of an uploading file
            'showRemove' => false,
            'showUpload' => false,
            'showCancel' => false, // show a cancel of uploading process button
            'browseClass' => 'btn btn-primary',
            'browseLabel' => 'Upload',
            //'maxFileSize' => 15000,
        ],
    ]) ?>

    <?= $form->field($uploadingForm, 'imageFiles[]')->widget(FileInput::class, [
        'options' => ['id' => 'bar', 'accept' => 'image/*'],
        'pluginOptions' => [
            'initialPreview' => $collectionFileArray ?? '',
            'initialPreviewAsData' => true,
            'fileActionSettings' => [
                'showZoom' => false,
                'showRemove' => false,
            ],
            'showCaption' => true, // show an input where we show the name of an uploading file
            'showRemove' => false,
            'showUpload' => false,
            'showCancel' => false, // show a cancel of uploading process button
            'browseClass' => 'btn btn-primary',
            'browseLabel' => 'Upload',
            //'maxFileSize' => 15000,
        ],
    ]) ?>

    <?= Html::button('add', [
        'class' => 'btn btn-primary', 'id' => 'add-input',
        'data-url' => Url::to(['/admin/slider/add-input'])
    ]) ?>
    <?php $this->registerJs("
        $('#add-input').on('click', function() {
            let self = this;
            $.ajax($(self).data('url'), {
                method: 'post',
                processData : false,
                contentType : false,
                success: function(r) {
                    $(self).before(r);
                },
            });
        });
    "); ?>

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

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

</div>

Ajax 添加新字段的操作：

public function actionAddInput()
    {
        return $this->renderAjax('_ajax-slide');
    }

_ajax 幻灯片：

<?php

use yii\bootstrap4\ActiveForm;
use kartik\file\FileInput;
use app\models\forms\UploadingForm;


$form = new ActiveForm();
$model = new UploadingForm();
?>

<?= $form->field($model, 'imageFiles[]')->widget(FileInput::class, [
    'options' => ['id' => 'new-input', 'accept' => 'image/*'],
    'pluginOptions' => [
        'initialPreview' => false,
        'initialPreviewAsData' => true,
        'fileActionSettings' => [
            'showZoom' => false,
            'showRemove' => false,
        ],
        'showCaption' => true, // show an input where we show the name of an uploading file
        'showRemove' => false,
        'showUpload' => false,
        'showCancel' => false, // show a cancel of uploading process button
        'browseClass' => 'btn btn-primary',
        'browseLabel' => 'Загрузить',
        //'maxFileSize' => 15000,
    ],
]); ?>

该字段实际上是通过单击按钮添加的，但不显示。同时，会出现一个小方块，您可以单击它并实际加载图像，但 FileInput 小部件本身并未显示。

同时，浏览器控制台显示错误：

Uncaught ReferenceError: fileinput_0c236089 is not defined

我知道在呈现页面时，FileInput 会创建一个唯一的页面 ID（我是这么认为的，因为如果添加了所有其他 FileInput 小部件，它们将具有相同的编号）。问题是，如何将此数字添加到我的新字段中，以便小部件显示该字段？

一般来说，如何更新它，或者什么？初始化它？那怎么办？

如果您有任何解决方法的想法，我将不胜感激。通常，任务是在当前页面上以任意数量动态添加和删除此 FileInput 小部件。

4

0 回答 0