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


How to delete img and show CMultiFileUpload via AJAX

状态:带有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,
        ));
    }

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

有两种选择:

  • 创建一个单独的控制器并将其呈现为您的小部件(删除图像后将通过ajax发送请求)
  • 在页面上呈现小部件,并在删除后借助javaScript通过CSS显示它

Q2:上传图片后如何显示图片?

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