Question

status：带有ajax上传文件字段的表单。 Q1：如何在通过ajax删除图像后显示CMultiFileUpload小部件？

Q2：如何在立即上传图像后显示图像？

我的模特没什么变化

我的观点

<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'fa-depreciation-form',
    'enableAjaxValidation'=>false,
    'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); ?>
<div class="row" id="file_upload">
    <?php
        if ($model->file_name){
            $file = '/images/'. $model->id . '/'. $model->file_name;
            echo '<div id="forAjaxRefresh">';
            echo '<img src="http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . $file.'" width="150px" />';
            echo "<br />";
            echo CHtml::ajaxLink('remove', array('delimg', 'id'=>$model->id), array('update'=>'#forAjaxRefresh'));
            echo '</div>';

        }else{      
            $this->widget('CMultiFileUpload', array(
                 'model'=>$model,
                 'name'=>'file_name',
                 'attribute'=>'file_name',
                 'accept'=>'jpg|gif|png',
                 'options'=>array(
                    //'onFileSelect'=>'function(e, v, m){ alert("onFileSelect - "+v) }',
                    //'afterFileSelect'=>'function(e, v, m){ alert("afterFileSelect - "+v) }',
                    //'onFileAppend'=>'function(e, v, m){ alert("onFileAppend - "+v) }',
                    //'afterFileAppend'=>'function(e, v, m){ alert("afterFileAppend - "+v) }',
                    'onFileRemove'=>'function(e, v, m){ alert("onFileRemove - "+v) }',
                    //'afterFileRemove'=>'function(e, v, m){ alert("afterFileRemove - "+v) }',
                    'max'=>3,
                 ),
              ));
        }
        ?>
    </div>      
<div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
    </div>

<?php $this->endWidget(); ?>

</div><!-- form -->

我的控制器

public function upload($id)
    {
        // THIS is how you capture those uploaded images: remember that in your CMultiFile widget, you set 'name' => 'images'
        $images = CUploadedFile::getInstancesByName('file_name');

        // proceed if the images have been set
        if (isset($images) && count($images) > 0) {

            // make the directory to store the pic:
            if(!is_dir(Yii::getPathOfAlias('webroot').'/images/fadepreciation/'. $id)) {
                mkdir(Yii::getPathOfAlias('webroot').'/images/fadepreciation/'. $id);
                chmod(Yii::getPathOfAlias('webroot').'/images/fadepreciation/'. $id, 0755); 
                // the default implementation makes it under 777 permission, which you could possibly change recursively before deployment, but here's less of a headache in case you don't
            }

            // go through each uploaded image
            foreach ($images as $image => $pic) {
                $pic->saveAs(Yii::getPathOfAlias('webroot').'/images/tmp/' . $pic->name);
                echo '<img src="'.   Yii::getPathOfAlias('webroot').'/images/tmp/'.$id . '/' . $pic->name.' /><br />';
                if ($pic->saveAs(Yii::getPathOfAlias('webroot').'/images/fadepreciation/'.$id . "/" . $pic->name)) {
                    // add it to the main model now
                    $model=$this->loadModel($id);   
                    $model->file_name = $pic->name; //it might be $img_add->name for you, filename is just what I chose to call it in my model

                    $model->save(); // DONE
                    unlink(Yii::getPathOfAlias('webroot').'/images/tmp/' . $pic->name);
                }
            }
        }
    }

    /**
     * Creates a new model.
     * If creation is successful, the browser will be redirected to the 'view' page.
     */
    public function actionCreate()
    {
        $model=new FaDepreciation;

        if(isset($_POST['FaDepreciation']))
        {
            //Assign our safe attributes
            $model->attributes=$_POST['FaDepreciation'];

            //Save the model to the database
            if($model->save()){ 
                $this->upload($model->id);
                $this->redirect(array('view','id'=>$model->id));
            }           
        }

        $this->render('create',array(
            'model'=>$model,
        ));

    }

Answer 1

Q1：如何在通过ajax删除图像后显示CMultiFileUpload小部件？

有两种选择：

创建一个单独的控制器并将其呈现为您的小部件（请求将在删除图像后通过ajax发送）
在页面上渲染小部件，并在删除后借助javaScript通过CSS显示小部件。

Q2：如何在立即上传图像后显示图像？

最明显的方法是将响应作为JSON发送，并在客户端将html块与图像组合在一起。
第二个选项是在服务器上呈现带有图像的页面并将其发送给客户

如何删除img并通过AJAX显示CMultiFileUpload

1 个答案: