Yii1.0 使用thickbox结合独立控制器实现图片上传

图片上传，是一个网站经常要使用到的功能，在yii中，如果在每个控制器的create和update中，都写一次相关的逻辑，显得很麻烦，这时，我们可以把图片上传的功能，单独拿出来，放在一个独立的控制器中，然后通过一定的方法，上传图片时，使用该控制器的方法，而保存到数据库时，则使用要调用这个控制器的其他控制器。

在这里，我们假设，有一张表，叫分类表：category,表的完整结构如下：

# 分类表create table category(cat_id int unsigned not null auto_increment primary key comment '分类ID',cat_name varchar(64) not null default '' comment '名称',cat_pid int unsigned not null default '0' comment '上级ID',cat_search_attr varchar(255) default '' comment '搜索的属性的ID,多个属性用,隔开',cat_price_range tinyint unsigned not null default '0' comment '搜索时价格的区间',cat_logo varchar(255) default '' comment '分类图标wap');

里面有一个字段，cat_logo，用来保存图 片的路径。

如果按照之前的方式，就是在CategoryController中的create和update这两个action中写上很多CUploadedFile相关的代码，如果现在不止一个category表，而还有goods等表时，则相应的GoodsController也要写上一大段这样的代码，维护起来显得很麻烦。

这时，我们可以通过一个临时表，并通过相应的方法，实现把图片上传分离出来。

1.首先，建立一个临时表

create table temp_upload_img(timg_id int unsigned not null auto_increment primary key comment '图片ID',timg_original varchar(255) default '' comment '原始图',timg_sm varchar(255) default '' comment '小图',timg_mid varchar(255) default '' comment '中图',timg_big varchar(255) default '' comment '大图',timg_create_time int default 0 comment '上传时间',timg_ip varchar(16) default '' comment '上传者IP',timg_user_id int unsigned default 0 comment '上传者ID')engine=myisam character set utf8 collate utf8_general_ci;

2.接着，使用gii工具生成model和CRUD操作，对应的文件分别为：TempUploadImg.php   TempUploadImgController.php以及相关的views

3.在要使用图片上传的category的_form中，加入如下代码：

(1)引入thickbox的相关插件及样式：

<link href="<?php echo SUPER;?>/thickbox3plus/thickbox.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="<?php echo SUPER;?>/thickbox3plus/jquery-1.1.3.1.pack.js"></script><script type="text/javascript" src="<?php echo SUPER;?>/thickbox3plus/thickbox-compressed.js"></script>

(2)在CActiveForm中，加入如下代码

<div class="form-group">            <div class="col-xs-2 no-padding-right" style="text-align: right"><?php echo $form->labelEx($model,'cat_logo'); ?>            </div>            <div class="col-xs-10">                    <span style="color:#000099;"><?php echo $form->textField($model,'cat_logo'); ?>                                        <a href="/super/tempUploadImg/uploadPic?myfield=Category_cat_logo&keepThis=true&TB_iframe=true&height=250&width=450" class="thickbox"><span class="btn btn-primary btn-white btn-sm">上传T</span></a></span>                    <?php                        if($form->error($model,'cat_logo')){                            //用户输入时的验证信息                            echo $form->error($model,'cat_logo');                         }  else {                            echo '这里输入提示信息';                        }                        ?>            </div></div>        <?php if(!$model->isNewRecord){?>        <div class="form-group">            <div class="col-xs-2 no-padding-right" style="text-align: right">预览图：            </div>            <div class="col-xs-10">                <div <span style="color:#000099;">id="Category_cat_logo_preview"</span>><img src="<?php echo $model->cat_logo;?>" style="width: 100px;"></div>            </div></div>        <?php }else{?>        <div class="form-group">            <div class="col-xs-2 no-padding-right" style="text-align: right">预览图：            </div>            <div class="col-xs-10">                <span style="color:#000099;"><div id="Category_cat_logo_preview"></span></div>            </div></div>        <?php }?>

(3)在_form.php底部放入一个iframe，这个iframe的作用很重要，当图片上传完后，提交的地方就提交到这个iframe中，注意name="upimg"

<!--图片上传：iframe--><iframe style="display: none; width: 600px; height: 300px;" id="upimg"<span style="color:#000099;"> name="upimg"</span>></iframe>

(4)注意ActiveForm中要加入

<pre name="code" class="php"><?php $form=$this->beginWidget('CActiveForm', array('id'=>'category-form','enableAjaxValidation'=>false,<span style="color:#000099;">        'htmlOptions'=>array(            'enctype'=>'multipart/form-data'        )</span>)); ?>

如果这个没有加入，则图片不能上传

4.在TempUploadImgController.php中添加如下方法：

/** * 图片上传 */public function actionUploadPic(){    $model=  new TempUploadImg();    if(isset($_POST['TempUploadImg'])){        $model->attributes=$_POST['TempUploadImg'];        //图片上传        $upload_obj=new PingUploads($model, 'timg_original');        $model->timg_original=$upload_obj->doSave('uploads', 'tempimg');        //获取保存图片地址的字段参数        if(isset($_GET['myfield'])&&$_GET['myfield']!=''){            $myfield=$_GET['myfield'];        }        if($model->save()){            $str=$model->timg_original;            $previewimg="<img style='width:100px;' src='".$str."'/>";            $html="<script>";            $html.="parent.document.getElementById('{$myfield}_preview').innerHTML=\"{$previewimg}\";";            //$html.="parent.closeDialog('mydialog');";            //$html.="parent.document.getElementById('dialogform').reset();";            $html.="parent.document.getElementById('{$myfield}').value=\"{$str}\";";            //$html.="alert('{$myfield}');";            $html.="</script>";            echo $html;            //exit();                //$this->redirect(array('view','id'=>$model->timg_id));        }    }    $this->renderPartial('uploadpic',array(        'model'=>$model,    ));}

5.TempUploadImgController.php中uploadPic.php这个views如下：

<?php $form=$this->beginWidget('CActiveForm', array('id'=>'temp-upload-img-index-form',        //'action'=>'/super/tempUploadImg/create','enableAjaxValidation'=>false,        'id'=>'dialogform',        'htmlOptions'=>array(            'enctype'=>'multipart/form-data',            'target'=>'upimg'        )));?><div class="row"><?php echo $form->labelEx($model,'timg_original'); ?><?php echo $form->fileField($model,'timg_original'); ?><?php echo $form->error($model,'timg_original'); ?></div><div class="row buttons"><?php echo CHtml::submitButton('Submit'); ?></div><?php $this->endWidget(); ?>