Yii中使用swfupload批量上传图片

2019独角兽企业重金招聘Python工程师标准>>>

网站开发中，批量上传图片功能在所难免，如果你想自己写一个出来，那么折腾又何必重复造轮呢。Yii官网有swfupload extension,但我测试下来并没那么的好用，所以我参考了swfupload demo 例子，结合yii，自己实现了个extension，并修改了swfupload中相关js，可以在批量上传图片中给每个图片添加alt属性，那么废话不多说，我们直接来看例子：

笔者是写一个extension，当然您也可以写成widget:

目录结构：
/extenstion

views
view.php

CSwfupload.php

view.php中内容如下，笔者为保持swfupload demo原味，基本参照原代码：

<link href="<?php echo Yii::app()->request->baseUrl;?>/css/swfupload.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var swfu;
    var settings;
    window.onload = function() {
        settings = {
            flash_url : "<?php echo Yii::app()->request->baseUrl;?>/js/swfupload/swfupload.swf",
            upload_url: "<?php echo $this->config['upload_url'];?>", //后台上传处理路径
            post_params: <?php echo CJavaScript::encode($this->config['post_params']);?>, //可自组织需要的post参数
            file_size_limit : "<?php echo $this->config['file_size_limit'];?>", //上传文件大小限制
            file_types :'*.jpg;*.png;*.gif',
            //file_types_description : "All Files",
            file_upload_limit : 10,
            file_queue_limit : 0,
            custom_settings : {
                progressTarget : "fsUploadProgress",
                cancelButtonId : "btnCancel"
            },
            debug: false,

            // Button settings
            //button_image_url: "images/TestImageNoText_65x29.png",
            button_width: "65",
            button_height: "29",
            button_placeholder_id: "spanButtonPlaceHolder",
            button_text: '<span class="theFont">Select</span>',
            button_text_style: ".theFont { font-size: 16; }",
            button_text_left_padding: 12,
            button_text_top_padding: 3,

            // The event handler functions are defined in handlers.js
            file_queued_handler : fileQueued,
            file_queue_error_handler : fileQueueError,
            file_dialog_complete_handler : fileDialogComplete,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
            upload_error_handler : uploadError,
            upload_success_handler : uploadSuccess,
            upload_complete_handler : uploadComplete,
            queue_complete_handler : queueComplete // Queue plugin event
            };

        swfu = new SWFUpload(settings);
        };

        function uploadStart(obj){ //在上传开始前得到图片对应的描述信息,作为post参数提交
        var alt = $('#'+obj.id).find('input').val();
        swfu.addPostParam("alt_desc", alt);
        return true;
    }
   //function uploadSuccess(){location.reload();}
</script>

<div id="content">
    <div class="fieldset flash" id="fsUploadProgress">
        <span class="legend">Upload Queue</span>
    </div>
    <div>
        <span id="spanButtonPlaceHolder"></span>
        <input type="button" value="Start Upload" onclick="swfu.startUpload();" style="margin-left: 2px; font-size: 8pt; height: 29px;" />

    </div>
</div>

CSwfupload.php文件内容如下 ：

<?php
class CSwfUpload extends CWidget
{
    public $config=array();
    public function init()
    {
        $this->render("view", array());
    }

    public function run()
    {
        $baseUrl = Yii::app()->request->baseUrl;
        Yii::app()->clientScript->registerScriptFile($baseUrl . '/js/swfupload/swfupload.js', CClientScript::POS_HEAD);
        Yii::app()->clientScript->registerScriptFile($baseUrl . '/js/swfupload/swfupload.queue.js', CClientScript::POS_HEAD);
        Yii::app()->clientScript->registerScriptFile($baseUrl . '/js/swfupload/fileprogress.js', CClientScript::POS_HEAD);
        Yii::app()->clientScript->registerScriptFile($baseUrl . '/js/swfupload/handlers.js', CClientScript::POS_HEAD);

    }

}

ok,extension我们已经写好，下面看看，在后台如何调用并上传图片

在后台调用：

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'jos-cos-hotelpic-form',
    'enableAjaxValidation'=>false,
)); ?>

<?php
$this->widget('application.extensions.swfupload.CFSwfUpload', array(
    'config' => array(
        'upload_url' => Yii::app()->createUrl('action/upload'),
        'post_params' => array('PHPSESSID'=>$_COOKIE['PHPSESSID']), //必须传sessionid,flash提交无法传递头信息
        'file_size_limit' => '2 MB',
        )
    )
);
?>

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

生成的界面如下：

controller中上传图片处理程序：

public function actionUpload()
{
   if (isset($_FILES["Filedata"])) {
       $upload_file = $_FILES['Filedata'];
       $file_info = pathinfo($upload_file['name']);
       $file_type = $file_info['extension'];
       $filename = uniqid().'.'.$file_info['extension'];
       $saveFile = 'upload/'.$filename;
       $name = $_FILES['Filedata']['tmp_name'];

       if (move_uploaded_file($name, $saveFile)) {
           echo '上传成功';
       }else{

       }

    }
    Yii::app()->end();
}

需要注意的时，swfupload默认上传图片没有添加图片描述的功能，需要改fileprogress.js,添加如下代码于44行(progressStatus.innerHTML = " ";)之后：

var imageAlt = document.createElement("div");
imageAlt.className = "imageAlt";
imageAlt.innerHTML = "<input type='text' name='alt[]' />";

this.fileProgressElement.appendChild(imageAlt);

一切OK。

转载于:https://my.oschina.net/yonghan/blog/597836