Question

我有一个带有Kartik的FileInput小部件的ActiveForm。这是一种编辑表单。我正在获取其中的数据库数据以及图像。

案例1-如果已经添加了图像，则每当我单击更新按钮时，它就会显示所需的大图像字段。
案例2-如果我选择新图像，则可以正常工作。

如何为现有图像的FileInput设置一些值以使其不为空/有效。我需要一些针对case1的解决方案。每次要求新映像更新任何更改。请帮我解决这个问题。

您可以参考下图-

Answer 1

我通过创建自定义方案遇到了解决方案。在您的情况下，我将修改以下规则：

当您更新然后“表单不传递图像”值时，您需要检查“客户端WhenClient”验证检查。像您的字段名称类和检查图像是否存在于预览框中。

模型文件：

[['site_plan'], 'image', 'skipOnEmpty' => true, 'extensions' => 'jpg, png, jpeg'],
['site_plan', 'required',
                'when' => function ($model) {
                    return false;
                },
                'whenClient' => "function (attribute, value) {    
              return ($('.field-modulenamemaster-site_plan .file-input .kv-file-content').find('img').length == 0 );
            }"],

表格输入：

<?php

$floor_img = array();
$floor_key = array();
if ($model->site_plan) {
    $floor_img[] = Url::base(TRUE) . '/uploads/' . $model->site_plan;
    $floor_key[]['key'] = $model->id;
}
echo $form->field($model, 'site_plan', ['template' => '<div class="col-lg-10 col-md-9 col-sm-12">{input}<br/><br/>{error}</div>'])->widget(FileInput::classname(), [
    'model' => $model,
    'attribute' => 'site_plan',
    'name' => 'site_plan',
    'options' => ['multiple' => false, 'accept' => 'image/*', 'id' => 'site_plan-id-1'],
    'pluginOptions' => [
        'initialPreview' => $floor_img,
        'showUploadedThumbs' => false,
        'initialPreviewConfig' => $floor_key,
        'deleteUrl' => Url::to(['modulesname/delete-image-site']),
        'showCaption' => false,
        'showRemove' => false,
        'showUpload' => false,
        "uploadUrl" => Url::to(['modulesname/upload']),
        'browseClass' => 'site_plan_btn btn btn-primary col-lg-6 col-md-8 col-sm-8 col-xs-6',
        'browseIcon' => '<i class="glyphicon glyphicon-plus-sign"></i> ',
        'browseLabel' => 'Upload Image',
        'allowedFileExtensions' => ['jpg', 'png', 'jpeg'],
        'previewFileType' => 'image',
        'initialPreviewAsData' => true,
        'overwriteInitial' => true,
        "dropZoneTitle" => 'Drag & drop file here...',
        "browseOnZoneClick" => false,
        'fileActionSettings' => [
            'showZoom' => true,
            'showRemove' => true,
            'showUpload' => false,
        ],
        'minFileCount' => 1,
        'maxFileSize' => 5120, //5mb
        'msgSizeTooLarge' => 'File exceeds maximum allowed upload size of <b>5MB</b>.',
    ],
    'pluginEvents' => [
        'filepredelete' => 'function(event, id, index) { 

                            }',
        'filepreremove' => 'function(event, id, index) { 

                            }',
        'fileselect' => 'function(event, numFiles, label){                               

                          }',
    ],
]);
?>

控制器删除上传的图片：

/**
     * Delete Site Plan Image on Project Update Action.
     * @return boolean
     */
    public function actionDeleteImageSite() {
        if (isset($_POST['key'])) {
            $key = $_POST['key'];
            $propety_master = ProjectMaster::findOne($key);
            if (file_exists(Yii::getAlias('@webroot') . '/uploads/' . $propety_master->site_plan)) {
                @unlink(Yii::getAlias('@webroot') . '/uploads/' . $propety_master->site_plan);
                Yii::$app->db->createCommand()->update('table_name', ['site_plan' => NULL], 'id =' . $key)->execute();
            }
            return true;
        } else {
            return false;
        }
    }

Kartik的FileInput小部件上的Yii2 ActiveForm验证错误

1 个答案: