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(); ?>