网站开发中,批量上传图片功能在所难免,如果你想自己写一个出来,那么折腾又何必重复造轮呢。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。