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

OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的，默认是只能上传一张图片的，但是uploadify.swf是支持多图片批量上传的，那么我们稍加改动就可实现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][0]:$_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" : 30,
 "swf" : "__STATIC__/uploadify/uploadify.swf",
 "fileObjName" : "download",
 "buttonText" : "批量上传图片",
 "uploader" : "{:U(\'File/uploadPicture\',array(\'session_id\'=>session_id()))}",
 "width" : 120,
 \'removeTimeout\' : 1,
 \'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);
 },1500);
 }
 } 
 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