如何在 kartik 上传小部件中更新多个图像?

How to update multiple images in kartik Upload widget?

这里我只能在更新模型时预览图像。我想正确加载图像,以便用户可以再删除一个文件,更新将相应地工作这是我的控制器

public function actionUpdate($id)
{
    $model = $this->findModel($id);
    $session_data = \common\models\Customer::find()->where(['user_id' => $model->customer_user_id])->one();
    $towing = \common\models\TowingRequest::find()->where(['id' => $model->towing_request_id])->one();
    $images_old = \common\models\Images::find()->where(['=', 'vehicle_id', $model->id])->all();
    $images = \common\models\Images::find()->where(['=', 'vehicle_id', $model->id])->one();

    if (!$images) {
        $images = new \common\models\Images();
    }
    if ($images_old) {
        foreach ($images_old as $image) {
            $baseurl = \Yii::$app->request->BaseUrl;
            $image_url = $baseurl . '../backend/uploads/' . $image->thumbnail;
            $all_images[] = Html::img("$image_url", ['class' => 'file-preview-image']);
        }
    } else {
        $all_images = '';
    }
    $vehiclefeatures = new \common\models\VehicleFeatures();
    $vehiclecondition = new \common\models\VehicleCondition();
    $featuredata = \common\models\VehicleFeatures::find()->where(['=', 'vehicle_id', $model->id])->all();

    $conditiondata = \common\models\VehicleCondition::find()->where(['=', 'vehicle_id', $model->id])->all();
    $features = \common\models\Features::find()->all();
    //  $vf = Yii::$app->db->createCommand('SELECT * FROM features f left join vehicle_features vf on vf.features_id=f.id;')->queryAll();
    $condition = \common\models\Condition::find()->all();
    if ($model->load(Yii::$app->request->post()) && $towing->load(Yii::$app->request->post()) && $vehiclefeatures->load(Yii::$app->request->post()) && $vehiclecondition->load(Yii::$app->request->post()) && $images->load(Yii::$app->request->post())) {

        $towing->save();

        if (!$model->save()) {

            $result = [];
            // The code below comes from ActiveForm::validate(). We do not need to validate the model
            // again, as it was already validated by save(). Just collect the messages.
            foreach ($model->getErrors() as $attribute => $errors) {
                $result[Html::getInputId($model, $attribute)] = $errors;
            }
            return $this->asJson(['validation' => $result]);
            // Yii::$app->response->statusCode = 422;
        }
        //delet vehicle features and add new features
        $command = Yii::$app->db->createCommand()
            ->delete('vehicle_features', 'vehicle_id = ' . $model->id)
            ->execute();
        if ($vehiclefeatures->value) {
            $vehicle_feature = \common\models\VehicleFeatures::inert_vehicle_feature($model, $vehiclefeatures->value);
        }
        //delete vehicle condition and add new features
        $command = Yii::$app->db->createCommand()
            ->delete('vehicle_condition', 'vehicle_id = ' . $model->id)
            ->execute();
        if ($vehiclecondition->value) {

            $vehicle_condition = \common\models\VehicleCondition::inert_vehicle_condition($model, $vehiclecondition->value);
        }
        $photo = UploadedFile::getInstances($images, 'name');

        if ($photo) {

            $command = Yii::$app->db->createCommand()
                ->delete('images', 'vehicle_id = ' . $model->id)
                ->execute();

            $save_images = \common\models\Images::save_container_images($model->id, $photo);

        }
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->render('update', [
        'model' => $model,
        'towing' => $towing,
        'images' => $images,
        'features' => $features,
        'condition' => $condition,
        'vehiclefeatures' => $vehiclefeatures,
        'vehiclecondition' => $vehiclecondition,
        'all_images' => $all_images,
        'featuredata' => $featuredata,
        'conditiondata' => $conditiondata,
        'session_data' => $session_data,
    ]);

}

这是我的表格,我在更新图像时遇到了问题。我知道这里我只是通过将图像添加到控制器中的 $all_images[] 和表单中的 initialPreview => $all_images 来预览图像,以便在上传时显示它。现在我想要的是正确加载图像,这样我就可以删除任何图像并可以添加更多图像。我只想知道如何在更新时在上传小部件中正确加载所有图像在更新时正确上传后我可以在控制器上处理它我将删除并取消链接所有图像并上传更新文件

这是我的模型图片

 <?=
        $form->field($images, 'name[]')->widget(FileInput::classname(), [
            'options' => ['accept' => 'image/*', 'multiple' => true],
            'pluginOptions' => [
                'previewFileType' => 'image',
                'allowedFileExtensions' => ['jpg', 'gif', 'png', 'bmp','jpeg'],
                'showUpload' => true,
                'initialPreview' => $all_images,
                'overwriteInitial' => true,

            ],
        ]);
        ?>

Yii2 文件输入上传多张图片,AJAX 基于图片预览和删除图片。

多张图片请参考:

Table : products_images
id (Primary)
product_id  (FK)
image

Table : product
id (Primary)
Name
ect

在此处查看表格...

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use kartik\widgets\FileInput;
?>

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

<?php echo '<label class="control-label">Choose an Image file(.png, .jpg)</label>'; ?>

<?php
//For Update Form : Fetch Uploaded Images and create Array to preview
$imagesList = array();
$imagesListId = array();
foreach ($model->productsImages as $img) {
    $imagesList[] = Url::base(TRUE) . '/' . $img->image;
    $imagesListId[]['key'] = $img->id;
}
?>

<?php
    $empty_image = Url::base(TRUE) . "/uploads/image-upload-empty.png";

    echo FileInput::widget([
        'model' => $model,
        'attribute' => 'products_image[]',
        'name' => 'products_image[]',
        'options' => ['multiple' => true, 'accept' => 'image/*', 'id' => 'products_image_id'],
        'pluginOptions' => [
            'initialPreview' => $imagesList,
            'initialPreviewConfig' => $imagesListId,
            'deleteUrl' => Url::to(['products/delete-image']),
            'showCaption' => false,
            'showRemove' => false,
            'showUpload' => false,
            'browseClass' => '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'],
            'previewFileType' => ['jpg', 'png'],
            'initialPreviewAsData' => true,
            'overwriteInitial' => false,
            "uploadUrl" => Url::to(['products/upload']),
            'uploadExtraData' => ['products_id' => $model->id, 'is_post' => $model->isNewRecord ? 'new' : 'update'],
            'msgUploadBegin' => Yii::t('app', 'Please wait, system is uploading the files'),
            //'msgUploadThreshold' => Yii::t('app', 'Please wait, system is uploading the files'),
            //'msgUploadEnd' => Yii::t('app', 'Done'),
            'msgFilesTooMany' => 'Maximum 15 products Images are allowed to be uploaded.',
            'dropZoneClickTitle' => '',
            "uploadAsync" => true,
            "browseOnZoneClick" => true,
            "dropZoneTitle" => '<img src=' . $empty_image . ' />',
            'fileActionSettings' => [
                'showZoom' => true,
                'showRemove' => true,
                'showUpload' => false,
            ],
            'validateInitialCount' => true,
            'maxFileCount' => 15,
            'maxFileSize' => 5120, //5mb
            'msgPlaceholder' => 'Select attachments',
        ],
        'pluginEvents' => [
            'filebatchselected' => 'function(event, files) {
              $(this).fileinput("upload");

              }',
            /* 'uploadExtraData' => 'function() {
              var out = {}, key, i = 0;
              $(".kv-input:visible").each(function() {
              $el = $(this);
              key = $el.hasClass("kv-new") ? "new_" + i : "init_" + i;
              out[key] = $el.val();
              i++;
              });

              return out;
              }', */
            'filepredelete' => 'function(event, files) {
                //var abort = true;
                var index = uploaded_images.indexOf(files);
                if (index !== -1) uploaded_images.splice(index, 1);
                 console.log(uploaded_images);
                 $("#productsmaster-images_array").val(uploaded_images);
               //return abort;   
            }',
            'fileuploaded' => 'function(event, data, previewId, index){
               //alert( data.response.initialPreviewConfig[0].key);
          uploaded_images.push(data.response.initialPreviewConfig[0].key);
            console.log(uploaded_images);
            $("#productsmaster-images_array").val(uploaded_images);
          }',
        /* 'filepreupload' => 'function(event, data, previewId, index){
          var form = data.form, files = data.files, extra = data.extra,
          response = data.response, reader = data.reader;
          console.log(data.jqXHR);
          console.log("File pre upload triggered");
          }', */
        ],
    ]);
    ?>

<?= $form->field($model, 'images_array')->hiddenInput()->label(false) ?>

<?php echo '<br>' ?>
<?= Html::submitButton('<i class="glyphicon glyphicon-save-file"></i> UPLOAD FILE', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary'], ['students/create']) ?>
<?php ActiveForm::end(); ?>

<?php
$script = <<< JS
   // initialize array    
   var uploaded_images = [];  
JS;
$this->registerJs($script);
?>

此处控制器文件:

<?php

/*
     * Post products Images Upload Action Via FileInput Yii2 Extention.
     */

    public function actionUpload() {
        $files = array();
        $allwoedFiles = ['jpg', 'png'];
        if ($_POST['is_post'] == 'update') {
            $products_id = $_POST['products_id'];
            if ($_FILES) {
                $tmpname = $_FILES['ProductsMaster']['tmp_name']['products_image'][0];
                $fname = $_FILES['ProductsMaster']['name']['products_image'][0];
                //Get the temp file path
                $tmpFilePath = $tmpname;
                //Make sure we have a filepath
                if ($tmpFilePath != "") {
                    //save the filename
                    $shortname = $fname;
                    $size = $_FILES['ProductsMaster']['size']['products_image'][0];
                    $ext = substr(strrchr($shortname, '.'), 1);
                    if (in_array($ext, $allwoedFiles)) {
                        //save the url and the file
                        $newFileName = Yii::$app->security->generateRandomString(40) . "." . $ext;
                        //Upload the file into the temp dir
                        if (move_uploaded_file($tmpFilePath, 'uploads/products/' . $newFileName)) {
                            $productsImages = new productsImages();
                            $productsImages->products_id = $products_id;
                            $productsImages->image_for = 'products';
                            $productsImages->image = 'uploads/products/' . $newFileName;
                            $productsImages->created_at = time();
                            $productsImages->save();
                            $files['initialPreview'] = Url::base(TRUE) . '/uploads/products/' . $newFileName;
                            $files['initialPreviewAsData'] = true;
                            $files['initialPreviewConfig'][]['key'] = $productsImages->id;
                            return json_encode($files);
                        }
                    }
                }
            } /* else {
              return json_encode(['error' => 'No files found for pload.']);
              } */
            return json_encode($files);
        } else {
            if (isset($_POST)) {
                if ($_FILES) {
                    $files = ProductsMaster::SaveTempAttachments($_FILES);
                    return json_encode($files);
                    $result = ['files' => $files];
                    Yii::$app->response->format = trim(Response::FORMAT_JSON);
                    return $result;
                } /* else {
                  echo json_encode(['error' => 'No files found for pload.']);
                  } */
            }
        }
    }


    /**
     * Uploaded Images Delete Action on Update Forms Action
     * @return boolean
     */
    public function actionDeleteImage() {
        $key = $_POST['key'];
        if (is_numeric($key)) {
            $products_image = ProductsImages::find()->where(['id' => $key])->one();
            unlink(Yii::getAlias('@webroot') . '/' . $products_image->image);
            $products_image->delete();
            return true;
        } else {
            unlink(Yii::getAlias('@webroot') . '/uploads/products/temp/' . $key);
            return true;
        }
    }

    /**
    ** Create Products
    **/
     public function actionCreate() {

          //Products Images
        // temp store image moved and save to database.. with generated forms.. 
            if (count($model->images_array) > 0) {
                $images_array = explode(',', $model->images_array);
                if (!empty($images_array) && $model->images_array != '') {
                    foreach ($images_array as $image) {
                        $file = Yii::$app->basePath . '/uploads/products/temp/' . $image;
                        $rename_file = Yii::$app->basePath . '/uploads/products/' . $image;
                        rename($file, $rename_file);
                        $productsImages = new productsImages();
                        $productsImages->products_id = $model->id;
                        $productsImages->image_for = 'products';
                        $productsImages->image = 'uploads/products/' . $image;
                        $productsImages->created_at = time();
                        $productsImages->save();
                    }
                }
            }

     }


    ?>

这里是模特 我在附件模型中添加了加载功能。

<?php 

/*
     * Save Temp Images 
     */

    public static function SaveTempAttachments($attachments) {
        $files = "";
        $allwoedFiles = ['jpg', 'png'];
        if ($_FILES) {
            $tmpname = $_FILES['ProductsMaster']['tmp_name']['products_image'];
            $fname = $_FILES['ProductsMaster']['name']['products_image'];

            if (!empty($attachments)) {
                if (count($fname) > 0) {
                    //Loop through each file
                    for ($i = 0; $i < count($fname); $i++) {
                        //Get the temp file path
                        $tmpFilePath = $tmpname[$i];
                        //Make sure we have a filepath
                        if ($tmpFilePath != "") {
                            //save the filename
                            $shortname = $fname[$i];
                            $size = $attachments['ProductsMaster']['size']['products_image'][$i];
                            $ext = substr(strrchr($shortname, '.'), 1);
                            if (in_array($ext, $allwoedFiles)) {
                                //save the url and the file
                                $newFileName = Yii::$app->security->generateRandomString(40) . "." . $ext;
                                //Upload the file into the temp dir
                                if (move_uploaded_file($tmpFilePath, 'uploads/products/temp/' . $newFileName)) {
                                    $files['initialPreview'] = Url::base(TRUE) . '/uploads/products/temp/' . $newFileName;
                                    $files['initialPreviewAsData'] = true;
                                    // $files['uploadExtraData'][]['is_post'] = 'new';
                                    $files['initialPreviewConfig'][]['key'] = $newFileName;
                                }
                            }
                        }
                    }
                }
            }
        }
        return $files;
    }

?>