OneThink实现多图片批量上传功能

OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThink实现多图片批量上传功能。

首先我们修改模型管理中的字段类型选项,在里面添加一项“批量上传图片”,如下图所示。

OneThink实现多图片批量上传功能

添加方法:打开Application/Admin/Common/function.php文件,找到function get_attribute_type($type=”),在第86行下添加一项’uploadpics’ => array(‘批量上传图片’,’varchar(255) NOT NULL’)

/*********************
*copyright www.devdo.net*
*获取属性类型信息********
*********************/
function get_attribute_type($type=''){
// TODO 可以加入系统配置
static $_type = array(
'num' => array('数字','int(10) UNSIGNED NOT NULL'),
'string' => array('字符串','varchar(255) NOT NULL'),
'textarea' => array('文本框','text NOT NULL'),
'datetime' => array('时间','int(10) NOT NULL'),
'bool' => array('布尔','tinyint(2) NOT NULL'),
'select' => array('枚举','char(50) NOT NULL'),
'radio' => array('单选','char(10) NOT NULL'),
'checkbox' => array('多选','varchar(100) NOT NULL'),
'editor' => array('编辑器','text NOT NULL'),
'picture' => array('上传图片','int(10) UNSIGNED NOT NULL'),
'uploadpics' => array('批量上传图片','varchar(255) NOT NULL'), //批量上传图片项
'file' => array('上传附件','int(10) UNSIGNED NOT NULL'),
);
return $type?$_type[$type][]:$_type;
}

添加这一项后,你在后台添加字段的时候就可以进行选择了,不过要实现功能你还需要修改一些东西。

修改你的模板(如添加文章、修改文章模板),比如Application/Admin/View/Think/edit.html。在<case value=”picture”>…</case>下添加如下代码。

这里是为了实现具体图片上传功能。

<case value="uploadpics">
<!-- 批量上传 -->
<input type="file" id="upload_all">
<input type="hidden" name="{$field.name}" value="{$data[$field['name']]}" class="input_upload_all"/>
<div class="uploadpics_piclist">
<ul class="highslide-gallery">
<notempty name="data[$field['name']]">
<?php
$pics=explode(',', $data[$field['name']]);
foreach($pics as $v){
if($v!=''){
?>
<li><a href="__ROOT__{$v|get_cover='path'}" target="_blank"><img src="__ROOT__{$v|get_cover='path'}"/></a><span onclick="delthispic(this)" dataid="{$v},"></span></li>
<?php
}
}
?>
</notempty>
</ul>
</div>
<script type="text/javascript">
//上传图片
/* 初始化上传插件 */
$("#upload_all").uploadify({
"height" : ,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "批量上传图片",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
"width" : ,
'removeTimeout' : ,
'fileTypeExts' : '*.jpg; *.png; *.gif;',
"onUploadSuccess" : uploadAll,
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
function uploadAll(file, data){
var data = $.parseJSON(data); var src = '';
if(data.status){
src = data.url || '__ROOT__' + data.path;
var value = '<li><a href="'+src+'" class="highslide" onClick="return hs.expand(this)"><img src="' + src + '"/></a><span onclick="delthispic(this)" dataid="'+data.id+',"></span></li>';
$('.input_upload_all').val($('.input_upload_all').val()+data.id+','); $('.uploadpics_piclist ul').append(value); } else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},);
}
}
function delthispic(obj){
var dataid=$(obj).attr('dataid');
$('.input_upload_all').val($('.input_upload_all').val().replace(dataid, ""));
$(obj).parent().remove();
}
</script>
</case>

最终原理,定义一个字段,存取的是图片的ID序列,图片上传成功后保存ID,再通过ID获取图片地址。

明白原理后要实现其它地方上传(如前台上传),上传其它类型文件以及定义上传路径等就都可以扩展改编来实现。

如有不明白地方,请查看详情http://www.devdo.net/onethink-tupianpiliangshangchuan.html

上一篇:Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙


下一篇:Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙