如何正确添加到已呈现 ActiveForm Yii2 中的新 FileInput 输入的当前表单？

问题描述

朋友们好！

给定下一个任务。我需要在当前呈现的 ActiveRecord 表单中添加 Kartik 的 FileInput 的新字段。

我采用了下一个方法。

控制器的动作：

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,]);
    }

_form：

<?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,['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,[
        'options' => ['id' => 'bar',]) ?>

    <?= 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-slide:

<?PHP

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


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

<?= $form->field($model,[
    'options' => ['id' => 'new-input','pluginoptions' => [
        'initialPreview' => false,'fileActionSettings' => [
            'showZoom' => false,// show an input where we show the name of an uploading file
        'showRemove' => false,// show a cancel of uploading process button
        'browseClass' => 'btn btn-primary','browseLabel' => 'Загрузить',]); ?>

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

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

Uncaught ReferenceError: fileinput_0c236089 is not defined

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajax kartik-v yii2